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内 容 简介 

本 书 采用 “基础 知识 一 核心 应 用 一 核心 技术 一 高 级 应 用 一 行业 应 用 一 项 目 实践 ”的 结构 和 “由 浅 入 深 ， 由 深 到 精 ” 
的 模式 进行 讲解 。 

全 书 共 分 6 篇 31 章 。 首 先 讲解 了 HTML 5、CSS 3、 文 本 、 列 表 、 页 面 布局 等 Web 前 端 开 发 的 语言 基础 知识 ， 然 
后 深入 介绍 了 JavaScript 语言 基础 、 开 发 应 用 、 对 象 与 数组 、 函 数 与 闭 包 以 及 人 机 交互 等 核心 运用 。 在 实践 环节 不 仅 
讲述 了 Web 前 端 开发 在 金融 理财 、 移 动 互联 网 、 电 子 商务 等 行业 的 应 用 ， 还 介绍 了 其 在 企业 门户 网 站 、 游 戏 大 厅 网 站 
以 及 App 等 大 型 项 目 中 的 应 用 ， 全 面 展现 了 项 目 开发 实践 的 全 过 程 。 

本 书 的 目的 是 多 角度 、 全 方位 地 帮助 读者 快速 掌握 软件 开发 技能 ， 构 建 从 高 校 到 社会 的 就 职 桥梁 ， 让 有 志 于 从 事 
软件 开发 工作 的 读者 轻松 步 入 职场 。 本 书 赠送 的 资源 比较 多 ， 在 本 书 前 言 部 分 对 资源 包 的 具体 内 容 、 获 取 方式 以 及 使 
用 方法 等 做 了 详细 说 明 。 

本 书 适合 希望 学 习 Web 开发 前 端 编程 语言 的 初中 级 程序 员 和 希望 精通 程序 开发 的 程序 员 阅读 , 还 可 作为 大 中 专 院 
校 及 社会 培训 机 构 的 师 生 以 及 正在 进行 软件 专业 相关 毕业 设计 的 学 生 阅读 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 
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PREFACE 哲 


丛书 说 明 


本 套 “ 软 件 开发 魔 典 ”系列 图 书 ， 是 专门 为 编程 初学 者 量 身 打造 的 编程 基础 学 习 与 项 目 实践 用 书 。 

本 从 书 针对 “ 零 基础 ” 和 “入 门 ”级 读者 ， 通 过 案例 引导 读者 深入 技能 学 习 和 项 目 实践 。 为 满足 初学 
者 在 基础 入 门 、 扩 展 学 习 、 编 程 技 能 、 行 业 应 用 、 项 目 实 践 5 个 方面 的 职业 技能 需求 ， 特 意 采用 “基础 知 
识 一 核心 应 用 一 核心 技术 一 高 级 应 用 一 行业 应 用 一 项 目 实践 ”的 结构 和 “由 浅 入 深 ， 由 深 到 精 ”的 模式 进 


本 套 丛书 目前 计划 有 以 下 书目 。 
《Java 从 入 门 到 项 目 实践 〈 超 值 版 )》 
《C 语言 从 入 门 到 项 目 实践 〈 超 值 版 )》 


《HTML 5 从 入 门 到 项 目 实践 〈 超 值 版 )》 
《MySQL 从 入 门 到 项 目 实践 〈 超 值 版 )》 
《JavaScript 从 入 门 到 项 目 实践 〈 超 值 版 )》 《Oracle 从 入 门 到 项 目 实践 〈 超 值 版 )》 
《C++ 从 入 门 到 项 目 实践 〈 超 值 版 )》 《HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 〈 超 值 版 )》 


古人 云 ， 读 万 卷 书 ， 不 如 行 万 里 路 ， 行 万 里 路 ， 不 如 阅 人 无 数 ， 阅 人 无 数 ， 不 如 有 高 人 指 路 。 这 句 话 
道 出 了 引导 与 实践 对 于 学 习 知 识 的 重要 性 。 本 书 始 于 基础 ， 结 合理 论 知识 的 讲解 ， 从 项 目 开发 基础 入 手 ， 
逐步 引导 读者 进行 项 目 开发 实践 ， 深 入 浅 出 地 讲解 Web 前 端 编程 的 各 项 技术 和 项 目 实践 技能 。 我 们 的 目的 
是 多 角度 、 全 方位 地 帮助 读者 快速 掌握 软件 开发 技能 ， 为 读者 构建 从 高 校 到 社会 的 就 职 桥梁 ， 让 有 志 从 事 
软件 开发 的 读者 轻松 步 入 职场 。 


Web 前 端 开发 最 佳 学 习 线 路 
本 书 以 Web 前 端 开发 最 佳 的 学 习 模式 设置 内 容 结构 ， 第 1~4 篇 可 使 您 掌握 Web 前 端 编程 基础 知识 、 


应 用 技能 ， 第 5、6 篇 可 使 您 拥有 多 个 行业 项 目 开发 经 验 。 遇 到 问题 可 学 习 本 书 同步 微 视频 ， 也 可 以 通过 在 
线 技术 支持 ， 让 老 程序 员 为 您 答疑 解 惑 。 


本 书 内 容 
全 书 分 为 6 篇 31 章 。 


Rm oass JavaScript 从 入 门 到 项 目 实践 〈 超 值 版 ) 
二 +JavaScript 1 
Nb/ 


第 1 篇 (第 1~6 章 ) 为 基础 知识 ,主要 讲解 Web 前 端 开 发 技术 的 基础 知识 ,包括 HTML 5 知识 、CSS 
3 知识 、 网 页 文本 与 网 页 图 像 等 ， 引 领 读者 步 入 Web 前 端 开发 的 编程 世界 。 使 读者 能 快速 掌握 JavaScript 
语言 ， 为 后 面 更 好 地 学 习 网 页 编程 打下 坚实 基础 。 

第 2 篇 (第 7~13 章 ) 为 核心 应 用 ， 主 要 讲解 Web 前 端 开发 的 核心 应 用 ， 包 括 网 页 中 超 链接 、 网 页 列 
表 、 网 页 表格 以 及 网 页 表单 的 美化 ， 网 页 布局 、 网 页 动画 效果 等 。 通 过 本 篇 的 学 习 ， 读 者 可 对 Web 前 端 开 
发 有 较 高 的 掌握 水 平 。 

第 3 篇 (第 14 一 18 章 ) 为 核心 技术 ， 主 要 介绍 通过 案例 示范 学 习 JavaScript 在 前 端 开 发 中 的 一 些 核心 技 
术 ， 例 如 JavaScript 的 基础 、 开 发 应 用 工具 、 对 象 与 数组 、 函 数 与 闭 包 以 及 窗口 与 人 机 交互 对 话 框 等 。 

第 4 篇 (第 19~24 章 ) 为 高 级 应 用 ， 主 要 讲解 JavaScript 的 高 级 运用 。 通 过 本 篇 的 学 习 ， 读 者 将 学 会 文 
档 (Document) 对 象 与 文档 对 象 模型 (DOM)，JavaScript 的 事件 机 制 、 客 户 端 开 发 技术 、 服 务 器 端 开发 技 
术 、 安 全 策略 以 及 错误 和 异常 处 理 等 。 学 好 本 篇 可 以 极 大 地 提升 JavaScript 编程 能 力 。 

第 5 篇 (第 25~28 章 ) 为 行业 应 用 ， 主 要 讲解 JavaScript 语言 在 游戏 、 金 融 理财 、 移 动 互联 网 、 电 子 
商务 等 行业 开发 的 应 用 。 另 外 补充 了 软件 工程 师 的 必 备 素养 与 技能 ， 为 日 后 进行 软件 开发 积累 下 行业 开发 
经 验 。 

第 6 篇 (第 29~31 章 ) 为 项 目 实践 ， 介 绍 企业 门户 网 站 、 游 戏 大 厅 网 站 、 便 捷 计 算 器 App 等 实战 特效 
案例 。 本 篇 内 容 不 仅 融入 了 作者 丰富 的 工作 经 验 和 多 年 的 使 用 心得 ， 还 提供 了 大 量 来 自 工作 现场 的 实例 ， 
具有 较 强 的 实战 性 和 可 操作 性 。 学 习 完 本 篇 ， 读 者 可 对 JavaScript 在 Web 前 端 开发 中 的 应 用 有 个 详尽 的 了 
解 ， 能 在 自己 的 职业 生涯 中 应 对 各 类 JavaScript 开发 需求 。 

系统 学 习 本 书后 ， 可 以 掌握 Web 前 端 开发 基础 知识 、 全 面 的 前 端 程序 开发 能 力 、 优 良 的 团队 协同 技能 和 
丰富 的 项 目 实践 经 验 。 我 们 的 目标 就 是 让 初学 者 、 应 届 毕 业 生 快速 成 长 为 一 名 合格 的 初级 程序 员 ， 通 过 演练 
积累 项 目 开发 经 验 和 团队 合作 技能 ， 在 未 来 的 职场 中 获取 一 个 较 高 的 起 点 ， 并 能 迅速 融入 软件 开发 团队 。 


本 书 特色 


1. 结构 科学 、 易 于 自学 

本 书 在 内 容 组 织 和 范例 设计 中 都 充分 考虑 了 初学 者 的 特点 ， 讲 解 由 浅 入 深 、 循序渐进 。 无 论 您 是 否 接 
触 过 Web 前 端 开 发 语言 ， 都 能 从 本 书 中 找到 最 佳 的 起 点 。 

2. 视频 讲解 、 细 致 透彻 

为 降低 学 习 难 度 ， 提 高 学 习 效率 ， 本 书 录制 了 同步 微 视频 (模拟 培训 班 模式 )。 通 过 视频 学 习 除了 能 轻 
松 学 会 专业 知识 外 ， 还 能 获取 老师 的 软件 开发 经 验 ， 使 学 习 变 得 更 轻松 、 有 效 。 

3. 超 多 、 实 用 、 专 业 的 范例 和 实践 项 目 

本 书 结合 实际 工作 中 的 应 用 范例 逐一 讲解 Web 前 端 开 发 的 各 种 知识 和 技术 ,在 行业 应 用 篇 和 项 目 实践 
篇 中 更 以 3 个 项 目的 实践 来 总 结 、 贯 通 本 书 所 学 ， 使 您 在 实践 中 掌握 知识 ， 轻 松 拥有 项 目 开发 经 验 。 

4. 随时 检测 自己 的 学 习 成 果 

每 章 首页 中 均 提供 了 学 习 指 引 和 重点 导读 ， 以 指导 读者 重点 学 习 及 学 后 检查 ， 每 章 后 的 就 业 面试 技巧 
与 解析 均 根 据 当 前 最 新 求职 面试 (笔试) 精 选 而 成 ， 读 者 可 以 随时 检测 自己 的 学 习 成 果 ， 做 到 融会 员 通 。 

5. 专业 创作 团队 和 技术 支持 

本 书 由 聚 慕 课 教育 研发 中 心 编 著 和 提供 在 线 服务 。 读 者 在 学 习 过 程 中 遇 到 任何 问题 ， 均 可 登录 


http://www.jumooc.com 网 站 或 加 入 图 书 读者 〈 技 术 支 持 ) QQ 群 (529669132) 进行 提问 ， 作 者 和 资深 程序 员 


将 为 读者 在 线 答疑 。 
本 书 附 赠 超 值 王牌 资源 库 


本 书 附 赠 了 极为 丰富 、 超 值 的 王牌 资源 库 ， 具 体内 容 如 下 : 

(1) 王牌 资源 1: 随 赠 本 书 “ 配 套 学 习 与 教学 ”资源 库 ， 提 升 读者 的 学 习 效 率 。 

。 本 书 同步 408 节 教 学 微 视频 录像 (支持 扫描 二 维 码 观看 )， 总 时 长 40 学 时 。 

。 本 书 3 个 大 型 项 目 案例 以 及 360 个 实例 的 源 代码 。 

。 本 书 配套 上 机 实 训 指导 手册 及 本 书 教学 PPT 课件 。 

(2) 王牌 资源 2， 随 赠 “职业 成 长 ”资源 库 ， 突 破 读者 职业 规划 与 发 展 瓶颈 。 

。 求职 资源 库 ，100 套 求 职 简历 模板 库 、600 套 毕业 答辩 与 80 套 学 术 开题 报告 PPT 模板 库 。 

。 面试 资源 库 : 程序 员 面 试 技巧 、 常 见面 试 (笔试) 题库 、400 道 求职 常见 面试 (笔试) 真题 与 解析 。 

。 职业 资源 库 ， 程序 员 职业 规划 手册 、 软 件 工程 师 技 能 手册 、 常 见 错误 及 解决 方案 、 开 发 经 验 及 技巧 
集 、100 套 岗 位 竞聘 模板 、 网 页 设计 技巧 查询 手册 。 

(3) 王牌 资源 3， 随 赠 “软件 开 发 魔 典 ”资源 库 ， 拓 展 读者 学 习 本 书 的 深度 和 广度 。 

。 案例 资源 库 ，600 个 实例 及 源码 注释 。 

。 项 目 资源 库 ， 行业 网 站 开发 策划 案 。 

。 软件 开发 文档 模板 库 : 60 套 8 大 行业 软件 开发 文档 模板 库 ，JavaScript 特效 案例 库 、 网 页 模板 库 、 
网 页 素材 库 、14 套 网 页 赏析 案例 库 等 。 

。 电子 书 资源 库 ' HTML 参考 手册 电子 书 、CSS 参考 手册 电子 书 、JavaScript 参考 手册 电子 书 、CSS 
属性 速 查 表 电 子 书 、HTML 标签 速 查 表 电 子 书 、jQuery 速 查 表 电 子 书 、 语 法 速 查 表 电 子 书 、 网 页 配 
色 电 子 书 、Web 布局 模板 电子 书 。 

(4) 王牌 资源 4: 编程 代码 优化 纠 错 器 。 

。 本 助手 能 让 软件 开发 更 加 便捷 和 轻松 ， 无 须 安装 配置 复杂 的 软件 运行 环境 即 可 轻松 运行 程序 代码 。 

。 本 助手 能 一 键 格式 化 ， 让 凌乱 的 程序 代码 规整 美观 。 

。 本 助手 能 对 代码 精准 纠 错 ， 让 程序 查 错 不 再 难 。 


上 述 资源 获取 及 使 用 


注意 : 由 于 本 书 不 配送 光盘 ， 因 此 书 中 所 用 资源 及 上 述 资源 均 需 借助 网 络 下 载 才 能 使 用 。 


1. 资源 获取 

采用 以 下 任意 途径 ， 均 可 获取 本 书 所 附 赠 的 超 值 王牌 资源 库 。 

(1) 加 入 本 书 微 信 公 众 号 “ 聚 慕 课 jumooc”， 下 载 资源 或 者 咨询 关于 本 书 的 任何 问题 。 
(2) 登录 网 站 www:jumooc.com， 搜 索 本 书 并 下 载 对 应 资源 。 加 法 中 
(3) 加 入 本 书 读者 〈 技 术 支持 ) 服务 QQ 群 (529669132)， 读 者 可 以 打开 群 “ 文 件 ” 中 对 应 的 Word a 


文件 ， 获 取 网 络 下 载 地 址 和 密码 。 


(4) 通过 电子 邮件 elesite@163.com、408710011@qq.com 与 我 们 联系 ， 获 取 本 书 相 应 资源 。 


2. 使 用 资源 
读者 可 通过 以 下 途径 学 习 和 使 用 本 书 微 视频 和 资源 。 


Gs JavaScript 从 入 门 到 项 目 实践 〈 超 值 版 ) 
二 +JavaScript 1 
Ke 


(1) 通过 PC 端 (在 线 )、App 端 (在 /离线 )、 微 信 端 (在线) 以 及 平板 端 〈 在 /离线 ) 学习 本 书 微 
视频 。 
(2) 将 本 书 资源 下 载 到 本 地 硬盘 ， 根 据 学 习 需 要 选择 性 使 用 。 


读者 对 象 


本 书 非常 适合 以 下 人 员 阅读 : 

没有 任何 网 页 设计 基础 的 初学 者 。 

有 一 定 的 HTML 基础 ， 想 进一步 精通 HTML 编程 的 人 员 。 
有 一 定 的 Web 前 端 开发 基础 ， 没 有 项 目 实践 经 验 的 人 员 。 
正在 进行 软件 专业 相关 毕业 设计 的 学 生 。 

大 中 专 院 校 及 培训 学 校 的 教师 和 学 生 。 


创作 团队 


本 书 由 聚 莫 课 教育 研发 中 心 组 织 编写 。 河 南 工业 大 学 的 李 岗 老师 任 主编 ， 胡 江 汇 、 张 猛 、 李 永 刚 老师 
任 副 主编 。 其 中 李 岗 老师 负责 编写 第 1 章 一 第 10 章 ， 胡 江 汇 老师 负责 编写 第 11 章 一 第 17 章 , 张 猛 老师 负 
责编 写 第 18 章 ~ 第 24 章 ， 李 永 刚 老师 负责 编写 第 25 章 ~~ 第 31 章 。 

在 本 书 的 编写 过 程 中 ， 我 们 竭尽 所 能 将 最 好 的 讲解 呈现 给 读者 ， 但 也 难免 有 疏漏 和 不 妥 之 处 ， 敬 请 广 
大 读者 批评 指正 。 若 读者 在 学 习 中 遇 到 困难 或 疑问 ， 或 有 何 建议 ， 可 发 邮件 至 elesite@163.com。 另 外 ， 读 
者 也 可 以 登录 我 们 的 网 站 http://www.jumooc.com 进行 交流 以 及 免费 下 载 学 习 资 源 。 
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HTML 5 基础 入 门 ………………… 002 
曲 本 章 教学 微 视频 : 12 个 27 分 钟 

HTML 的 基本 概念 … 
1.1.1 什么 是 HIML… 
1.1.2 HTML 的 发 展 史 pe002 
1.1.3 HTML 与 XHTML 
HTML 5 的 优势 ……… 
1.2.1 解决 跨 浏览 器 问题 …………003 
1.2.2 ”部 分 代替 了 原来 的 JavaScrip 
1.2.3 更 明确 的 语义 支持 
1.2.4 增强 了 Web 应 用 程序 的 功能 ………004 
编写 第 一 个 HTML 页 面 … 
1.3.1 搭建 HTML 运行 环境 … 
1.3.2 检查 浏览 器 是 否 支持 ……………007 
1.3.3 编写 “hello HTML 5”Web 页 面 …008 
认识 网 页 与 网 站 
1.4.1 网 页 与 网 站 的 关系 ………009 
1.4.2 建立 网 站 的 一 般 流程 
就 业 面试 技巧 与 解析 … 
1.5.1 面试 技巧 与 解析 (一 ) 
1.5.2 面试 技巧 与 解析 (二 )…………………010 


HTML 5 文档 基本 结构 …………………… 011 
曲 本 章 教学 微 视频 : 29 个 46 分 钟 
HTML 5 文档 构成 ………………011 
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HTML 5 的 语法 变化 012 
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2.3.1 标签 014 
2.3.2 单 标签 014 
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HTML 5 文档 头 部 标签 016 
2.4.1 设置 页 面 标题 标签 …… 016 
2.4.2 引用 外 部 文件 标签 017 
2.4.3 ”内 嵌 样 式 标签 …… i 
<meta> 标 签 ………… 018 
页 面 注释 标签 … 
标题 标签 、 换 行 标签 及 不 换行 标签 
py 可 题 灶 狂 :ee 
2.7.2 ”标题 字 对 齐 属性 align …… 
段落 标签 、 换 行 标签 及 不 换行 标签 
2.8.1 段落 标签 …………… 
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po 
2.8.3 不 换行 标签 … 
其 他 标签 
2.9.1 水 平 线 标签 … 
2.9.2 插入 空格 ……… 
2.9.3 ”插入 特殊 字符 … 
就 业 面 试 技巧 与 解析 ………… 
2.10.1 面试 技巧 与 解析 (一 )… 
2.10.2 面试 技巧 与 解析 (二 ) … 


CSS 3 基础 入 门 … 
〇 本章 教学 微 视频 : 15 个 ”42 分 钟 
CSS 概述 …… 
3.1.1 CSS 概述 ……… 
3.1.2 CSS 的 发 展 历史 … 
3.13 CSS 3 的 新 药 能 :ne 
CSS 的 基本 语法 .ee 
HTML 网 页 应 用 CSS 样式 的 方法 
3.3.1 使 用 行内 样式 表 
3.3.2 使 用 内 部 CSS… 
3.3.3 引入 外 部 样式 表 … 
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CSS 三 大 特性 … 
3.4.1 CSS 层 登 性 … 
3.4.2 ”CSS 继承 性 … 
3.4.3 ”CSS 优先 性 … 
在 脚本 中 修改 显示 样式 
3.5.1 随机 改变 页 面 的 背景 色 …: 
3.5.2 动态 增加 立体 效果 … 
实践 案例 一 一 设计 登录 和 注册 界面 
3.7.1 面试 技巧 与 解析 (一 ) 
3.7.2 面试 技巧 与 解析 (二 ) 


CSS 3 样式 选择 器 041 
@ 本章 教 学 微 视频 : 22 个 ”71 分 钟 
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4.2.1 元 素 选择 器 
4.2.2 通 配 选 择 器 
42.3 了 人 D 选 择 器 … 
4.2.4 class 选择 器 
42.5 群 组 选择 器 eee 
层次 选择 器 …… 
4.3.1 包含 选择 器 … 
4.3.2 子 选择 器 -………… 
4.3.3 CSS 3 新 增 的 兄弟 选择 器 
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配合 counter-increment 属性 添加 
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4.5.3 目标 (:target ) 伪 类 选择 器 
4.5.4 否定 ( :not ) 伪 类 选择 器 …… 
实践 案例 一 一 制作 404 页 面 ……………… 
就 业 面试 技巧 与 解析 …… 
4.8.1 面试 技巧 与 解析 (一 ) 


4.8.2 面试 技巧 与 解析 (二 ) …………………063 
使 用 并 美化 网 页 文本 …………………… 064 
@ 本 章 教学 微 视频 : 16 个 ”43 分钟 
设置 网 页 文本 字体 … 


5.1.1 设置 字体 粗细 属性 
5.1.2 设置 字体 风格 属性 
5.1.3 设置 字体 大 小 属性 


5.2 


5.3 


5.4 


5.5 
5.6 


第 6 章 


6.1 


62 


6.3 


5.1.4 ”设置 字体 类 型 属性 …… 
5.1.5 设置 文本 行 高 属性 … 
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实践 案例 一 一 设置 简单 的 文字 效果 ……-079 
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5.6.2 面试 技巧 与 解析 (二 ) 


使 用 并 美化 网 页 图 像 ………………………… 081 
加 本 章 教学 微 视频 : 17 个 48 分 钟 

插入 网 页 图 像 … 
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设置 网 页 背景 颜色 和 背景 图 ………………… 
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使 用 并 美化 网 页 超 链接 …………………… 100 
〇 本 章 教学 微 视频 : 14 个 33 分钟 

超 链接 路 径 …………… 
定义 超 链 接 和 热点 区 域 
7.3.1 定义 超 链接 

7.3.2 链接 的 目标 窗口 ……… 
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8.2.1 使 用 列表 实现 纵向 菜单 … 
8.2.2 使 用 列表 实现 新 闻 列表 

8.2.3 使 用 列表 实现 图 片 的 排列 
设计 CSS 3 样式 美化 列表 …………………… 
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曲 本 章 教学 微 视频 : 30 个 ”64 分 钟 
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第 10 章 ”使 用 并 美化 表单 ………………… 151 


10.1 
10.2 表单 及 表单 控件 


加 本 章 教学 微 视频 : 23 个 55 分 钟 
表单 的 基本 结构 
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10.2.2 


表单 form 标签 … 
表单 input 标签 … 
使 用 label 定义 标签 


10.2.3 
10.2.4 
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使 用 <select> 和 <option> 标 签 … 
使 用 <fieldset> 和 <legend> 标 签 …… 
使 用 HTML 5 增强 的 <textarea> 
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103 ”HTML 5 新 增 的 表单 元 素 ………………155 
10.3.1 input 元 素 … 
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10.3.4 progress 元 素 … 
10.3.5 keygen 元 素 … 
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基础 知识 


本 篇 介绍 Web 前 端 开发 技术 的 基本 入 门 ， 包 括 HTML 5 基础 知识 、CSS 3 基础 知识 、 网 页 文本 与 网 页 
图 像 等 ， 引 领 读者 步 入 Web 前 端 开发 的 编程 世界 。 

读者 在 学 完 本 篇 后 将 会 了 解 到 标签 的 基本 概念 ， 掌 握 Web 前 端 开 发 的 基本 操作 及 应 用 方法 ， 为 后 面 更 
好 地 学 习 网 页 编程 打 好 基础 。 


第 1 章 HTML 5 基础 入 门 

第 2 章 HTML 5 文档 基本 结构 
第 3 章 CSS 3 基础 入 门 

第 4 章 CSS 3 样式 选择 器 

第 5 章 使 用 并 美化 网 页 文本 
第 6 章 使 用 并 美化 网 页 图 像 


第 1 章 
HTML 5 基础 入 门 


二 学 习 指引 


当今 社会 已 经 进入 互联 网 时 代 ， 人 们 的 生活 、 工 作 都 离 不 开 网 络 ， 网 页 设计 是 其 中 的 一 门 学 科 ， 将 成 
为 学 习 计算 机 知识 的 重要 内 容 之 一 。 本 章 介 绍 网 页 设计 中 的 基本 语言 HTML， 介 绍 它 的 基本 概念 和 编写 方 
法 ， 让 读者 初步 了 解 HTML。 


三 > 重点 导读 


。 了 解 HTIML 基本 概念 。 

*， 热 悉 HIML 5 的 优点 。 

。 掌 握 第 一 个 HTML 页 面 的 编写 方法 。 
。 热 悉 网 站 与 网 页 。 


1.1 HTML 的 基本 概念 


HTML 是 互联 网 上 应 用 最 广泛 的 标记 语言 之 一 ， 用 来 编写 因特网 上 的 网 页 。 
是 加 


1.1.1 什么 是 HTML 
HTML 是 标记 语言 ， 它 由 W3C 组 织 提供 的 一 套 标 记 标 签 组 成 。 程 序 员 使 用 这 些 标签 进行 全 加 ,可 以 开 


发 出 各 种 各 样 的 网 页 。HTML 使 用 标记 标签 来 描述 网 页 。 一 个 网 页 除了 由 大 量 的 标签 组 成 ， 还 有 后 续 要 学 
习 的 CSS 样式 和 JavaScript 脚本 组 合 而 成 。 


加 
ee 1.1.2 HTML 的 发 展 史 
HTML 的 发 展 有 很 多 的 曲折 ， 从 诞生 至 今 已 有 20 多 年 的 历史 ， 经 历 的 版 本 以 及 发 布 日 期 如 下 。 


第 项 章 HTML 5 基础 入 门 


HTML (第 一 版 ): 1993 年 IETF 团队 的 一 个 草案 ， 并 不 是 成 型 的 标准 。 

HTML: 1995 年 11 月 作为 RFC1866 发 布 。 

HTML 3.2: 1996 年 1 月 14 日 由 W3C 组 织 发 布 ,是 HTML 文档 第 一 个 被 广泛 使 用 的 标准 。 

HTML 4.0: 1997 年 12 月 18 日 由 W3C 组 织 发 布 ， 也 是 W3C 推荐 标准 。 

HTML 4.01: 1999 年 12 月 24 日 由 W3C 组 织 发 布 , 是 HTML 文档 另 一 个 重要 的 被 广泛 使 用 的 标准 。 

XHTML 1.0: 发 布 于 2000 年 1 月 26 日 ， 是 W3C 组 织 推荐 ， 标 准 ， 经 修改 于 2002 年 8 月 1 日 重新 发 
布 。 

XHTML 1.1: 于 2001 年 5 月 31 日 发 布 。 

XHTML 2.0: 于 2002 年 8 月 5 日 发 布 草案 。 

HTML 5: 第 一 份 正式 草案 于 2008 年 1 月 22 日 公布 。 


1.1.3 HTML 与 XHTML 


XHTML 是 可 扩展 超 文本 标记 语言 ， 是 一 种 置 标语 言 ， 表 现 方式 与 HTML 类 似 , 不 过 语法 上 更 加 严格 ， 
是 更 纯净 的 HTML 版 本 。 它 是 W3C 的 一 个 标准 ， 与 HTML 4.01 几乎 相同 。 

XHTML 是 以 XML 格式 编写 的 HTML， 是 指 可 扩展 超 文本 编辑 语言 ， 与 HIML 4.01 版 本 几乎 相同 ， 
可 以 说 XHTML 是 更 严格 、 更 纯净 的 HTML 版 本 。XHTML 是 以 XML 应 用 的 方式 定义 的 HTML， 在 2001 
年 1 月 ，W3C 推荐 发 布 为 标准 ， 目 前 ， 几 乎 得 到 所 有 主流 浏览 器 的 支持 。 

XHTML 具有 <!DOCTYPE .….> 强 制 性 、 元 素 必须 合理 嵌 套 、 元 素 必须 有 关闭 标签 、 空 元 素 必须 包含 关 
闭 标签 、 元 素 必 须 是 小 写 、 属 性 名 称 必须 是 小 写 、 属 性 值 必须 有 引号 和 不 允许 属性 简写 等 特性 。 


1.2 HTML 5 的 优势 


HTML 5 相对 于 前 面 的 版 本 ,以 HTML、XHTML 来 说 , 增加 了 一 些 实用 的 新 功能 ， 对 于 用 户 和 网 页 开 
发 来 说 ，HTML 5 的 出 现 意义 很 重大 。 但 是 HTML 5 并 不 是 革命 性 的 改版 ， 不 会 对 开发 者 带 来 过 多 的 冲击 。 
本 节 我 们 就 来 介绍 HTML 5 的 一 些 优势 。 


1.2.1 解决 跨 浏览 器 问题 


对 于 网 页 设计 程序 员 来 说 ， 跨 浏览 器 问题 绝对 是 使 其 记忆 深刻 的 一 个 问题 。 

在 HTML 5 前面 的 版 本 中 ， 由 于 不 同 的 浏览 器 对 于 HTML 标准 支持 的 不 同 ， 致 使 同样 的 网 页 在 不 同 的 
浏览 器 中 表现 的 效果 不 同 。 对 于 HTML 5， 各 大 浏览 器 厂商 对 于 HTML 5 都 表示 出 很 高 的 热情 ， 这 是 解决 
跨 浏览 器 的 根本 所 在 。 


1.2.2 ”部 分 代替 了 原来 的 JavaScript 


HTML 5 中 新 增 了 一 些 功能 ， 这 些 功 能 可 以 部 分 代替 JavaScript。 如 打开 一 个 页 面 后 ， 想 让 某 个 文本 框 
获得 输入 焦点 ， 很 多 人 会 想到 用 JavaScript 来 完成 。 
【 例 1-1】 〈 实 例文 件 ，chol\Chap1.1.html) 获取 文本 框 的 焦点 。 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<form action="demo"> 
姓名 : <input type="text" name="Name"><br> 
成 绩 : <input type="text" name="Grade" id="grade"><br> 
</form> 
</body> 
</html> 
<script> 
document .getElementById ("grade") .focus () 
</script> 


相关 的 代码 实例 请 参考 Chap1.1.html 文件 ， 在 Chrome 浏览 器 中 运行 的 结果 如 图 1-1 所 示 。 


8 - ox 


Te 
COlDoahot QT) 


姓名 : 
| 


1-1 获取 文本 框 的 焦点 
在 HTML 5 中 ， 则 只 需要 设置 autofocus 属性 就 可 以 代替 JavaScript 代码 ， 代 码 如 下 : 


<form action="demo"> 

姓名 : <input type="text" name="Name"><br> 

成 绩 : <input type="text" name="Grade" autofocus><br> 
</form> 


在 HIML 5 中 , 如 一 些 输入 验证 的 属性 ， 以 前 都 需要 通过 JavaScript 来 完成 , 现在 都 只 需要 一 个 HIML 5 
属性 就 可 以 实现 。 


1.2.3 ”更 明确 的 语义 支持 


在 HTML 5 以 前 , 布局 基本 都 是 使 用 <div> 标 签 来 实现 , 通过 id 来 区 分 , 这 样 就 缺乏 明确 的 语义 。 HTML 
5 则 提供 了 更 明确 的 语义 元 素 ， 代 码 如 下 : 

<body> 

<header>. . .</header> 


<nav>...</nav> 
<section>...</section> 


<footer>...</footer> 
</body> 


1.2.4 ”增强 了 Web 应 用 程序 的 功能 


HTML 对 于 Web 应 用 程序 来 说 功能 太 匮乏 了 ， 如 上 传 文件 时 想 同 时 选择 多 个 文件 都 不 行 , 为 了 弥补 类 
似 的 不 足 ， 在 HTML 5 中 新 增 大 量 API 来 提高 应 用 程序 性 能 ， 增 强 用 户 体验 ， 以 及 对 应 用 程序 现 有 的 功能 
进行 扩展 。 
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1.3 编写 第 一 个 HTML 页 面 


前 面 介绍 了 HTML 的 基本 知识 ， 下 面 编写 一 个 简单 的 HTML 页 面 ， 使 用 的 是 WebStorm 编辑 软件 ,在 
后 续 的 讲解 中 均 使 用 这 款 编辑 器 。 


1.3.1 搭建 HTML 运行 环境 


HTML 运行 环境 非常 简单 ， 它 不 需要 服务 端 , 只 需要 下 载 一 款 编辑 器 , 如 Dreamweaver、WebStorm 等 ， 
在 编辑 器 中 直接 编写 代码 ， 然 后 在 浏览 器 中 查看 效果 。 下 面 以 WebStorm 为 例 来 介绍 一 下 。 
首先 到 WebStorm 编辑 器 的 官网 http://www.jetbrains.com/webstorm/ 去 下 载 软件 的 安装 包 , 如 图 1-2 所 示 。 


图 1-2 WebStorm 编辑 器 的 官网 
安装 完成 后 ， 还 需要 创建 一 个 文件 夹 ， 用 于 存放 代码 ， 假 设 在 桌面 创建 这 个 文件 夹 ， 命 名 为 “源码 ”， 


如 图 1-3 所 示 。 


图 1-3 “源码 ”文件 夹 


启动 WebStorm 编辑 器 , 在 编辑 器 中 打开 刚才 创建 的 文件 夹 “源码”, 操作 顺序 是 选择 fle 一 open 命令 ， 
在 弹出 的 窗口 中 ， 选 择 “ 源 码 ” 选 项 ， 如 图 1-4 所 示 。 
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图 1-4 ”找到 源码 文件 
单 击 OK 按钮 后 ， 在 弹出 的 对 话 框 中 单 击 This Window 按钮 ， 这 样 就 进入 “源码 ”文件 夹 里 了 ， 如 图 
1-5 所 示 ， 以 后 所 编写 的 代码 都 在 这 里 面 。 


i 


1-5 进入 “源码 ”文件 夹 
完成 以 上 步骤 ， 接 下 来 就 可 以 创建 HTML 页 面 了 。 
创建 HTML 页 面 有 两 种 方法 。 
第 一 种 :操作 顺序 是 File 一 New 一 HIML File， 如 图 1-6 所 示 。 


图 1-6 创建 HTML 页 面 
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图 1-7 创建 HTML 页 面 


单 击 HTML File 选项 后 ， 弹 出 命名 窗口 ， 这 是 第 一 个 页 面 ， 所 以 命名 为 one， 如 图 1-8 所 示 。 


单 击 OK 按钮， 


图 1-8 页 面 命名 
页 面 创建 完成 ， 如 图 1-9 所 示 。 


图 1-9 新 创建 的 页 面 


1.3.2 ”检查 浏览 器 是 否 支持 


在 WebStorm 上 


和 ， 把 鼠标 指针 移动 到 编辑 器 的 右上 角 , 会 默认 显示 5 种 浏览 器 的 图 标 ， 如 


图 


1-10 所 示 。 
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图 1-10 ”默认 的 浏览 器 
如 果 用 户 的 计算 机 上 安装 了 相应 的 浏览 器 ， 当 单 击 时 会 在 浏览 器 中 显示 页 面 内 容 ， 如 果 没 有 安装 ， 就 
会 弹出 找 不 到 的 提示 框 ， 如 图 1-11 所 示 。 
EE I | 
@ Windows 找 不 到 文件 firefox。 请 淆 十 文件 名 是 否 正确 后 ,再 斌 一 次 


1-11 提示 框 


六 1 3.3 编写 “hello HTML 5”Web 页 面 


一 切 准备 就 绪 ， 开 始 编写 一 个 简单 的 页 面 。 
就 会 发 现 ， 当 onehtml 文件 创建 完成 时 ， 里 面 有 一 些 代 码 ， 这 些 代码 其 实 是 HIML 的 框架 ， 只 需 在 
<body></body> 标 签 中 编写 需要 的 内 容 即 可 ， 如 图 1-12 所 示 ， 其 他 标签 含义 将 在 后 续 的 内 容 介 绍 。 


图 1-12 编写 hello HTML 5 页 面 
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在 Chrome 浏览 器 中 运行 的 结果 如 图 1-13 所 示 。 


C 侣 |[Ooanos. @ 图 女 ] : 


hello HTML5! 


1-13 one.html 文件 显示 效果 


1.4 ”认识 网 页 与 网 站 
网 页 和 网 站 都 是 互联 网 的 一 部 分 ， 本 节 介 绍 网 页 和 网 站 的 基本 概念 。 


1.4.1 网 页 与 网 站 的 关系 


网 页 是 一 个 文件 ， 它 存在 于 计算 机 中 ， 而 这 部 计算 机 必须 是 与 互联 网 相连 的 。 网 页 是 由 网 址 (URL) 
来 识别 与 存 取 的 ， 当 在 浏览 器 中 输入 网 址 后 ， 网 页 文件 会 被 传送 到 正在 浏览 网 页 的 计算 机 中 ， 然 后 通过 浏 
览 器 对 网 页 进行 解析 ， 再 展示 给 用 户 。 

网 站 是 指 根 据 一 定 的 规则 ， 使 用 HTML 等 工具 制作 的 用 于 展示 特定 内 容 的 相关 网 页 的 集合 。 

网 站 和 网 页 最 直接 的 关系 是 网 站 有 后 合 ， 也 就 是 网 站 里 的 内 容 可 以 更 换 ， 而 网 页 没有 后 合 ， 里 面 的 东 
西 全 是 固定 的 ， 没 法 再 更 换 。 

从 某 种 程度 上 讲 ， 网 站 是 由 网 页 组 成 的 ， 但 是 网 站 往往 要 复杂 得 多 ， 网 站 一 般 由 许多 个 网 页 组 成 。 但 
是 网 页 设计 是 网 站 设计 的 基础 ， 只 有 学 好 了 网 页 设计 才能 组 织 好 网 站 设计 。 


1.4.2 ”建立 网 站 的 一 般 流程 


网 站 建设 的 流程 基本 上 都 包括 域名 注册 查询 、 网 站 策划 、 网 页 设计 、 网 站 功能 、 网 站 优化 技术 、 网 站 
内 容 整 理 、 网 站 推广 、 网 站 评估 、 网 站 运营 、 网 站 整体 优化 、 网 站 改版 等 。 

1. 网 站 建设 的 需求 

有 网 站 建设 需求 的 客户 向 网 站 建设 公司 提出 具体 的 网 站 建设 要 求 , 这 些 要 求 都 是 需要 通过 文字 的 形式 ， 
详细 地 向 制作 公司 进行 说 明 ， 要 将 需要 建设 的 网 站 要 求 、 内 容 ， 以 及 产品 描述 全 部 描写 清楚 。 网 站 制作 公 
司 则 要 对 客户 的 网 站 建设 要 求 进行 全 方位 的 评估 及 了 解 ， 这 样 才 能 做 出 符合 用 户 需求 的 网 站 。 

2. 制定 网 站 建设 方案 

针对 客户 提出 的 网 站 建设 需求 ， 设 计 出 整体 的 网 站 建设 方案 ， 并 与 客户 进行 再 次 商谈 ， 就 网 站 建设 的 
风格 ， 主 题 以 及 相关 的 细节 进行 详细 的 沟通 ， 只 有 在 与 客户 达到 共识 之 后 才能 无 所 顾忌 地 进行 网 站 建设 。 

3. 网 站 建设 初稿 ， 敲 定 细节 

在 与 客户 达成 共识 ， 网 站 建设 公司 便 开始 着 手 进行 网 站 建设 的 工作 ， 在 双方 约定 的 时 间 内 给 出 客户 网 
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站 建设 的 初稿 ， 就 双方 约定 的 网 站 风格 、 网 站 建设 主题 、 网 站 设计 内 容 等 进行 初步 审核 。 

在 初审 通过 之 后 ， 便 开始 对 网 站 建设 的 细节 进行 详细 处 理 ， 网 站 建设 的 框架 大 体 好 规划 ， 但 是 在 细节 
方面 需要 花费 的 时 间 比 较 多 ， 往 往 花费 时 间 越 多 ， 做 出 来 的 网 站 效果 更 好 。 

5. 网 站 建设 完成 ， 进 行 验收 

网 站 建设 完成 之 后 ， 需 要 网 站 制作 公司 反复 审核 和 试验 之 后 ， 才 能 交付 给 客户 完工 ， 在 交付 给 客户 之 
前 ， 所 有 的 网 站 制作 商都 要 对 网 站 进行 反复 的 测试 ， 特 别 是 对 于 网 站 的 核心 功能 模块 ， 要 进行 反复 的 测试 
才 可 以 交付 给 客户 。 

网 站 交 给 客户 之 后 ， 还 要 对 客户 进行 指导 ， 对 网 站 进行 维护 。 


1.5 “就 业 面试 技巧 与 解析 


1.5.1 面试 技巧 与 解析 (一) 


面试 官 : XHTML 是 一 种 为 适应 XML 而 重新 改造 的 HTML， 当 XML 越 来 越 成 为 一 种 趋势 ， 就 出 现 了 
这 样 一 个 问题 ， 如 果 用 户 有 了 XML， 是 否 还 需要 HIML? 

应 聘 者 : 依然 需要 使 用 HTML。 因 为 很 多 人 已 经 习惯 使 用 HTML 作为 他 们 的 设计 语言 ， 而 且 ， 已 经 有 
数 以 百 万 计 的 页 面 是 采用 HIML 编写 的 ， 所 以 在 将 来 依然 需要 HIML。 


1.5.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : HTML 文件 的 扩展 名 有 哪些 ? 

应 聘 者 : HTML 文件 的 扩展 名 有 “.html” 和 “.htm”。 

“.html” 是 当今 网 页 文件 的 一 种 最 基本 的 、 也 是 使 用 最 广泛 的 保存 格式 ， 是 一 种 超 文本 标记 语言 ， 页 面 
中 没有 嵌入 任何 服务 器 要 执行 的 语句 ， 是 一 种 静态 的 页 面 格式 ， 一 般 的 浏览 器 都 能 够 直接 解析 并 显示 。 

关于 “.htm”， 其 实 与 “html” 并 没有 本 质 意 义 上 的 区 别 ， 只 是 为 了 满足 DOS 的 8+3 (文件 名 不 能 超过 
8 个 字符 ， 扩 展 名 不 能 超过 3 个 字符 ) 的 文件 名 命名 规范 。 因 为 一 些 老 的 系统 32 位) 不 能 识别 4 位 文件 
扩展 名 ， 所 以 某 些 服务 器 要 求 .html 的 最 后 一 个 字母 1 省略。 浏览 器 能 自动 识别 和 打开 这 些 文件 ， 编 写 这 些 
网 页 网 址 的 时 候 必须 是 对 应 的 ， 也 就 是 说 index.html 和 index.htm 是 两 个 不 同 的 文件 ， 对 应 着 不 同 的 地 址 。 
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第 2 章 
HTML 5 文档 基本 结构 


WP 学 习 指 引 


HTML 5 的 文档 结构 包括 标题 、 段 落 、 列 表 、 表 格 、 绘 制 的 图 形 以 及 各 种 谈 入 对 象 。 本章 主要 介绍 HIML 5 
文档 的 基本 结构 。 


”重点 导读 


。 掌 握 HTML 5 文档 构成 。 

。 掌 握 HTML 5 的 语法 变化 。 
.掌握 HTML 5 标签 、 元 素 及 属性 。 
。 掌 握 HTML 5 文档 头 部 标签 。 

。 掌 握 <meta> 标 签 。 

。 掌 握 页 面 注释 标签。 

。 掌 握 标题 标签 。 

。 掌 握 段落 标签 。 

。 掌 握 其 他 标签 。 


2.1 _ HTML 5 文档 构成 


HTML 5 的 文档 结构 包括 头 部 (head)、 主 体 (body) 两 大 部 分 。 头 部 描述 浏览 器 所 需 的 信息 ， 主 体 包 
含 所 要 说 明 的 具体 内 容 ， 代 码 如 下 : 


<!DOCTYPE html> 
<html> 
<!-- 头 部 --> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 


<! 一 主体 --> 
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<body> 
</body> 
</html> 


.1.1 <IDOCTYPE> 声 明 


引用 官方 的 DTD 文件 , 在 HTML 5 之 前 的 版 本 , 如 XHTML、HTML 4.0 都 有 官方 的 DTD 文件 的 引用 。 
DTD 是 文档 类 型 定义 ， 它 主要 对 标签 的 使 用 进行 定义 。 基 于 HTML 5 设计 的 “化 繁 为 简 ” 准 则 ，HTML 5 
中 不 需要 引用 严格 意义 上 的 DTD 的 规范 ， 只 需 引 入 下 面 代码 即 可 : 


<!DOCTYPE html> 


2.1.2 。” <html> 标签 


HTML 文档 的 根 元 素 ， 成 对 出 现 <html></html>， 它 代表 文档 的 开始 和 结束 。 在 HTML 5 中 该 标签 可 以 
省 略 ， 但 是 为 了 符合 Web 标准 和 体现 文档 的 完整 性 ， 建 议 不 要 省 略 该 标签 。 


:2.1.3 ”<head> 标 签 


HTML 的 头 部 、 内 部 提供 了 许多 标签 ， 用 于 说 明文 档 头 部 的 相关 信息 。 
<head> 标 签 内 包含 的 主要 元 素 如 表 2-1 所 示 。 


表 2-1 <head> 标 签 内 包含 的 主要 元 素 


标 签 作 用 
<title></title> 用 于 定义 文档 的 标题 
<meta> 用 于 定义 html 元 数据 
<link> 用 于 链接 外 部 CSS 资源 文件 
<style></style> 用 于 定义 内 部 CSS 样式 
‘<script></script> 用 于 包含 JavaScript 脚本 


.1.4 <body> 标 签 
<body> 标 签 是 HTML 的 主体 部 分 ， 网 页 所 要 显示 的 内 容 都 放 在 该 标签 内 ， 语 法 如 下 面 代码 所 示 : 


<body> 


</body> 


2.2 HTML 5 的 语法 变化 


HTML 5 为 了 兼容 互联 网 中 不 规则 的 代码 ， 在 语法 上 有 一 部 分 的 变化 ， 下 面具 体 介绍 。 
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2.2.1 标签 不 再 区 分 大 小 写 
标签 不 再 区 分 大 小 写 ， 代 码 如 下 ; 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 标 签 不 再 区 分 大 小 写 </title> 
</head> 
<body> 
<span> 标 签 不 再 区 分 大 小 写 </Span> 
</body> 
</html> 


在 正 浏览 器 中 运行 的 结果 如 图 2-1 所 示 。 


- 0 x 

羡 CUsor Wdministrat PD - © | Ge 

文 作 。 帝 组 (6) 查看 V)】 收藏 夫 A) 工具 (T) 帮 肥 (H) 
标签 不 再 区 分 大 小 写 


2-1 标签 不 区 分 大 小 写 
虽然 “<span> 标 签 不 再 区 分 大 小 写 </Span>” 中 开始 标签 和 结束 标签 不 匹配 ， 但 是 这 完全 符合 HTML 5 
规范 。 用 户 可 以 通过 W3C 提供 的 在 线 验 证 页 面 来 测试 上 面 的 网 页 ， 验 证 网 址 为 http://validator.w3.org/。 


2.2.2 元 素 可 以 省 略 结束 标签 


HTML 5 显得 比较 宽容 , 它 允 许 一 部 分 HTML 标签 省 略 结束 标签 , 甚至 允许 同时 省 略 开始 和 结束 标签 ， 
代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 元 素 可 以 省 略 结束 标签 </title> 
</head> 


<h1> 元 素 可 以 省 略 结束 标签 </h1> 
在 正 浏 览 器 中 运行 的 结果 如 图 2-2 所 示 。 


= 口 x 
图 cNuserswdministat 只 - 0 | 辣 元 素 可 日 
文 外 ”六 (E) 豆 看 WV) 收工 琴 人 者 动 H) 


元 素 可 以 省 略 结束 标签 


蕊 100% ~ 


图 2-2 省 略 结束 标签 
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虽然 <html> 标 签 没有 结束 标签 ，<body> 开 始 标签 和 结束 标签 都 没有 ， 但 这 个 页 面 是 合法 的 。 


2.2.3 支持 boolean 值 的 属性 


在 HTML 中 有 一 些 元 素 的 属性 ， 当 只 写 属性 名 称 而 不 指定 属性 值 时 ， 表 示 属 性 值 为 que， 如 果 设 置 该 
属性 值 为 false， 则 不 使 用 该 属性 即 可 ， 代 码 如 下 : 


<input type="text" readonly="true"> 
<input type="text" readonly> 


2.2.4 ”允许 属性 值 不 使 用 引号 
在 HTML 5 中 ， 属 性 值 不 使 用 引号 也 是 正确 的 ， 代 码 如 下 : 


<body> 

<input type=text> 

<input type=checkbox> 

</body> 

注意 : 如 果 某 个 属性 值 的 属性 值 包含 空格 等 ， 容 易 引 起 浏览 器 混淆 的 属性 值 ， 那 么 建议 读者 使 用 引号 
把 它 的 属性 值 引起 来 。 


2.3 HTML 5 标签、 元素 及 属性 


HTML 网 页 实际 上 就 是 由 许 许多 多 各 种 各 样 的 HTML 元 素 构成 的 文本 文件 , 并 且 任 何 网 页 浏览 器 都 可 
以 直接 运行 HTML 文件 。 所 以 可 以 这 样 说 ，HTML 元 素 就 是 构成 HTML 文件 的 基本 对 象 ，HTML 元 素 可 
以 说 是 一 个 统称 而 已 。HTML 元 素 就 是 通过 使 用 HTML 标签 进行 定义 的 。 


2.3.1 标签 


像 <head>、<body>、<table> 等 被 尖 括 号 “<” 和 “>” 包 起 来 的 对 象 ， 都 是 HTML 标签 。 绝 大 部 分 的 标 
签 都 是 成 对 出 现 的， 如 <table></talbe>、<form></form>。 当 然 还 有 少 部 分 不 是 成 对 出 现 的 ， 如 <br/>、<hr/> 
等 。HTML 中 的 文档 和 HTML 元 素 是 通过 HTML 标签 进行 标记 的 。 


总 2.3.2 单 标 签 


单 标签 由 一 个 标签 组 成 ， 在 开始 标签 中 进行 关闭 ， 以 开始 标签 的 结束 而 结束 。 常 见 的 几 种 单 标签 如 下 。 
<br/>: 在 页 面 中 起 换行 的 作用 。 

<hr>: 在 页 面 中 创建 一 条 水 平 线 。 

<meta/>: 元 素 可 提供 有 关 页 面 的 元 信息 。 

<img 和 >: 图 片 标签 ， 用 于 在 页 面 插入 图 片 。 
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2.3.3” 双 标签 


双 标 签 由 “开始 标签 ”和 “结束 标签 ”两 部 分 构成 ， 如 图 2-3 所 示 。 


<p> 我 是 双 标签 </p> 
+ 4 
开始 标签 结束 标签 


图 2-3 双 标 签 


常见 双 标 签 如 下 。 
<h1></h1>: 标题 标签 。 
<p></p>: 段落 标签 。 
<ul></ul>; 无 序列 表 标签 。 
<table></table>: 表格 标签 。 


2.3.4 ”标签 属性 


回 
为 HTML 元 素 提供 各 种 附加 信息 的 就 是 HTML 属性 ， 它 总 是 以 “属性 名 = 属性 值 ” 的 形式 出 现 ， 而 且 
属性 总 是 在 HTML 元 素 的 开始 标签 中 进行 定义 。 
【 例 2-1】〔 实 例文 件 ，ch02\Chap2.1.html) 标签 属性 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<!-- 设 置 p 标签 的 align 属性 , 属性 值 为 center--> 
<p align="center">html 属性 </p> 


</body> 
</html> 
相关 的 代码 实例 请 参考 Chap2.1.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-4 所 示 。 
到 口 x 
站 CUsersAdministrat D-C 四 
文件 (F) 。 编 回 (E) ”查看 (V)】 收藏 夫 (A) 工具 ( ” 
臣 100% ~ 
图 2-4 标签 属性 
2.3.5 元 素 


[EE 
从 开始 标签 到 结束 标签 的 所 有 代码 , 就 是 HTML 元 素 , 如 <p>HTML</p>。 位 于 起 始 标签 和 结束 标签 之 
间 的 文本 就 是 HTML 元 素 的 内 容 。 
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2.4 ”HTML 5 文档 头 部 标签 


<head> 标 签 是 文档 的 头 部 标签 ， 它 是 所 有 头 部 元 素 的 容器 。<head> 中 的 元 素 可 以 引用 脚本 、 指 示 浏 览 
器 在 哪里 找到 样式 表 、 提 供 元 信息 等 。 

文档 的 头 部 描述 了 文档 的 各 种 属性 和 信息 , 包括 文档 的 标题 、 在 Web 中 的 位 置 及 和 其 他 文档 的 关系 等 。 
绝 大 多 数 文档 头 部 包含 的 数据 都 不 会 真正 作为 内 容 显 示 给 读者 。<title> 定 义 文档 的 标题 , 它 是 <head> 标 签 中 
唯一 必需 的 元 素 。 

应 该 把 <head> 标 签 放 在 文档 的 开始 处 ， 紧 跟 在 <html> 后 面 ， 并 处 于 <body> 标 签 之 前 ， 如 下 面 基本 的 
HTML 结构 代码 如 下 : 


<!DocTYPE html> 

<html> 

<!-- 头 部 标签 -一 > 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 

</head> 

<body> 

</body> 

</html> 


.4.1 设置 页 面 标题 标签 


<title> 标 签 定义 文档 的 标题 ， 在 所 有 HTML 文档 中 是 必需 的 ， 只 能 出 现在 <head> 中 。 
<title> 元 素 的 作用 : 

定义 浏览 器 工具 栏 中 的 标题 。 

提供 页 面 被 添加 到 收藏 夹 时 的 标题 。 

显示 在 搜索 引擎 结果 中 的 页 面 标题 。 

【 例 2-2】 (实例 文件 ，ch02\Chap2.2.html) 页 面 标题 标签 。 


<!DocTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 第 一 个 页 面 </title> 

</head> 

<body> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap2.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-5 所 示 。 


=—™] x 
国 GWserWdrinisrat P - o| | 屋 和 +5 面 x 


交 件 月 。 祝 坟 ) 吉 EW) gE 人 A DA 


<title> 标 签 


图 2-5 ”页 面 标题 标签 
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2.4.2 引用 外 部 文件 标签 


<link> 标 签 是 引用 外 部 文件 标签 ， 通 常 放置 在 一 个 网 页 的 头 部 标签 中 ， 用 于 链接 外 部 CSS 文件 。 
【 例 2-3】《〈 实 例文 件 ，ch02\Chap2.3.html) 引用 外 部 文件 标签 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<p> 引 入 外 部 文件 标签 </p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap2.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-6 所 示 。 


- oO x 

站 CWsersAdministat DC 
交付 (篇) 查看 V) 收工 内 ” 
引入 外 部 文件 标签 


夏 100% 


图 2-6 页 面 加 载 效果 
在 上 面 的 案例 中 引入 style 样式 文件 ，style 样式 文件 代码 如 下 : 


Pi 
background: red; 
color: white; 

} 


在 <head> 标 签 中 使 用 <link> 把 style 样式 引入 HTML， 代 码 如 下 : 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<!-- 引 入 外 部 css 文件 --> 
<link rel="stylesheet" href="style.css"> 
</head> 


在 下 浏览 器 中 运行 的 结果 如 图 2-7 所 示 。 


二 0 x 
可 cucerwdminera P ~ O 


Ec. 
人 外 澡 广 千村 空 。 | 
R100% ~- 


图 2-7 引用 外 部 文件 标签 


2.4.3 ”内 主 样式 标签 


回 
<style> 标 签 是 内 嵌 样 式 标签 ， 用 于 为 HTML 文档 定义 样式 信息 ， 它 位 于 <head> 头 部 中 。 在 <style> 标 签 
中 ， 可 以 规定 在 浏览 器 中 如 何 呈现 HTML 文档 。 
【 例 2-4】 〈 实 例文 件 ，ch02\Chap2.1.html) 内 嵌 样 式 标签 。 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
pt{ 
background: green; /* 设 置 p 标 签 的 背景 的 为 绿色 */ 
color: white; /* 设 置 P 标签 中 字体 颜色 为 白色 */ 
于 
</style> 
</head> 


<body> 
<p>style 用 于 内 同样 式 </P> 


</body> 
</html> 
相关 的 代码 实例 请 参考 Chap2.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-8 所 示 。 


- D x 
站 QUsersWdminisrat P -上 加 
文件 (篇 误 (E) 查看 (V) 收藏 交 (A) 工具 T” 


瑟 100% ~ 


图 2-8 内 赃 样 式 标签 


2.5 <meta> 标 签 


在 一 个 网 页 中 ，<meta> 标 签 用 来 做 网 页 的 关键 字 、 页 面 说 明 、 作 者 信息 、 网 页 的 定时 跳 转 等 声明 。 


1. 设置 页 面 关键 字 

Keywords (关键 字 ) 用 于 告诉 搜索 引擎 网 页 的 关键 字 ， 代 码 如 下 : 
<meta name="keywords"content=" 某 人 ,论坛 ,学历 , 前端 "> 

2. 设置 页 面 说 明 

Description (页 面 说明 》 用 于 告诉 搜索 引擎 网 站 的 主要 内 容 ， 代 码 如 下 : 
<meta name="description"” content="WEB 前 端的 一 些 面试 技巧 "> 

3. 设置 作者 信息 

Author 〈 作 者 信息 ) 用 于 介绍 作者 的 一 些 信息 ， 代 码 如 下 : 

<meta name="author" content=" 某 人 ， 他 的 邮箱 "/> 

4. 设置 网 页 的 定时 跳 转 

网 页 在 多 少 秒 后 自动 从 当前 页 面 跳 转 到 另外 一 个 网 页 页 面 或 网 站 ， 实 现代 码 如 下 : 


<meta http-equiv="Refresh" content=" ";URL=" "/> 


其 中 ，content 后 跟 值 为 当前 页 面 在 多 少时 间 跳 转 ，URL 值 为 跳 转 到 具体 的 网 页 网 站 。 
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2.6 页 面 注释 标签 


注释 是 在 HTML 代码 中 插入 描述 性 的 文本 ， 用 来 解释 该 代码 或 提示 其 他 信息 。 注 释 只 出 现在 代码 中 ， 
浏览 器 页 面 中 不 显示 。 在 HTML 中 插入 代码 , 对 于 日 后 的 维护 工作 有 很 大 的 好 处 , 也 便于 其 他 读者 去 理解 ， 
语法 如 下 : 

<!-- 注 释 的 内 容 --> 

【 例 2-5】〔 实 例文 件 ，ch02\Chap2.5.html》 页 面 注释 标签 。 

<!DOCTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 
<title> 页 面 注释 </title> 
</head> 
<body> 
<!-- 这 是 一 个 标题 --> 
<h1> 静 夜 思 </h1l> 
<!-- 这 是 一 个 列表 --> 
<ul> 
<1i> 窗 前 明月 光 , </1i> 
<1i> 颖 是 地 上 霜 .</1i> 
</ul> 
</body> 
</html> 


“这 是 一 个 标题 ”和 “这 是 一 个 列表 ”在 页 面 中 不 会 显示 。 
相关 的 代码 实例 请 参考 Chap2.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-9 所 示 。 


= 
司 cWaersvaninkea P -OB rma 
EE 


静夜 思 


* 窗 前 明月 光 ， 
， 疑 是 地 上 需 。 


R160% ~ 


图 2-9 页 面 注释 标签 


2.7 ”标题 标签 、 换 行 标签 及 不 换行 标签 


在 HIML 5 中 ,文本 结构 除了 有 行 和 段 出 现 以 外 ， 还 可 以 作为 标题 存在 ， 下 面 就 来 介绍 一 下 标题 
标签 。 
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Ns 


人 标题 标签 
D> 
em HTML 中 标题 由 <h1>~<h6> 标 签 来 定义 。 其 中 <h1> 代 表 1 级 标题 ， 级 别 最 高 ， 文 字 最 大 ， 其 他 标题 村 


签 依 次 递减 ，<h6> 标 签 级 别 最 低 。 
【 例 2-6】 实例 文件 ，ch02\Chap2.6.html) 标题 标签 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 标 题 标签 </title> 
</head> 
<body> 
<h1> 想 法 是 成 功 的 种 子 </h1> 
<h2> 想 法 是 成 功 的 种 子 </h2> 
<h3> 想 法 是 成 功 的 种 子 </h3> 
<h4> 想 法 是 成 功 的 种 子 </h4> 
<h5> 想 法 是 成 功 的 种 子 </h5> 
<h6> 想 法 是 成 功 的 种 子 </h6> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap2.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-10 所 示 。 


想法 是 成 功 的 种 子 
想法 是 成 功 的 种 子 
想法 是 成 功 的 种 子 

起 法 是 咸 功 的 各 了 

型 法 是 质 功 的 神子 


a 


有 os ~ 


图 2-10 标题 标签 


.7.2 ”标题 字 对 齐 属性 align 
标题 字 的 对 齐 属性 align， 它 包括 的 属性 如 表 2-2 所 示 。 


表 2-2 align 的 属性 值 


属 性 值 说 明 

center 居中 对 齐 内 容 

left 左 对 齐 内 容 

right 右 对 齐 内 容 

justify 对 行进 行 伸展 ， 这 样 每 行 都 可 以 有 相等 的 长 度 
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【 例 2-7】 实例 文件 ，ch02\Chap2.7.html》 标 题 文字 对 齐 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 标 题字 对 齐 属性 </title> 
</head> 
<body> 
<hl align="center"> 想 法 是 成 功 的 种 子 </h1l> <! 
<hl align="left"> 想 法 是 成 功 的 种 子 </h1l> <!-- 左 对 齐 内 容 --> 
<hl align="right"> 想 法 是 成 功 的 种 子 </h1> <!-- 右 对 齐 内 容 --> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap2.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-11 所 示 。 


Ge | . 
SN wa se ea A) eee 


想法 是 成 功 的 种 子 
想法 是 成 功 的 种 子 
想法 是 成 功 的 种 子 


图 2-11 标题 字 对 齐 属性 


2.8 段落 标签 、 换 行 标签 及 不 换行 标签 
在 网 页 中 对 文本 段落 进行 排版 时 ， 段 落 使 用 <p> 标 签 ， 换 行使 用 <br/> 标 签 ， 不 换行 使 用 <nobr> 标 签 。 


2.8.1 段落 标签 


段落 标签 即 <p> 标 签 ，<p> 开 始 和 </p> 结 束 之 间 的 内 容 形成 一 个 段落 。 
【 例 2-8】 实例 文件 ，ch02\Chap2.8.html) 段落 标签 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 段 落 </title> 
</head> 
<body> 
<p> 天 平公 平 的 时 候 很 少 ,不 公平 的 时 候 很 多 ,但 它 依旧 真实 .</p> 
<p> 什 么 是 公平 ,什么 是 不 公平 ? </p> 
<p> 公 平 不 公平 本 是 没有 界限 的 ,也许 大 家 当初 的 起 点 相同 ,但 历经 磨炼 和 痛苦 之 后 的 终点 岂止 是 相差 十 万 八 千里 呢 </p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap2.8.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-12 所 示 。 
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有 eraministet D ~ 0 | 大 “加 
XFD RR) EV MeN ITRm Wa) 


天 平公 平 的 时 性 恨 少 ， 不 公平 的 时 候 根 多 ， 乞 亡 依 | 真实 - 


大 家 当初 的 起 点 相同 ， 但 历经 糜 茶 和 


公 王 不 公 于 本 是 没有 寞 有 
逢 2 和 二 


2-12 ”段落 标签 


Se 2.8.2 换行 标签 


换行 标签 <br/> 是 一 个 单 标记 ， 它 没有 结束 标签 ， 作 用 是 将 文字 在 一 个 段 内 强制 换行 。 一 个 <br/> 标 签 
代表 一 次 换行 ， 连 续 的 多 个 <br/> 标 签 表示 多 次 换行 。 使 用 时 ， 只 需 在 要 换行 的 位 置 添加 即 可 。 
【 例 2-9】 实例 文件 ，ch02\Chap2.9.html) 换行 标签 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 换 行 </title> 
</head> 
<body> 
一 位 哲人 曾经 说 过 ; <br/>" 人 生 最 大 的 悲剧 莫 过 于 , 人们 毕 其 一 生 的 时 间 , 努 力 去 华 登 成功 的 梯子 , <br/> 当 有 卜 到 梯子 的 顶部 时 ， 
才 猛 然 发 现 , 这 个 梯子 靠 在 了 一 个 错误 的 建筑 上 -" 
<br/> 倘 若 目 标 错 了 ,那么 无 论 你 在 梯子 上 攀登 得 多 快 , 攀登 得 多 商 ,<br/> 哪 怕 是 第 一 个 到 达 目 的 地 也 毫 无 价值 .<br/> 爷 上 
正确 的 梯子 , 才 是 最 为 重要 的 事情 . 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap2.9.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-13 所 示 。 


站 GNuserswdministrat P - © | BS | ® 
文件 (六 缠 ( 昌 查看 (V) 收 厂 交 (A) 工具 (T) 帮 动 (H) 
一 位 哲人 曾经 说 过 ， 
“人 生 最 大 的 悲剧 莫 过 于 ， Stine 的 生 抑 因 二 二 克 册 的 幸子， 
当 有 到 梯子 的 顶部 时 ， 才 猛然 发 现 ， 这 个 梯子 靠 在 了 一 个 错误 的 建筑 上 ， 
倘若 目标 错 了 ， 全 | 攀登 得 多 高 ， 
娜 怕 是 第 一 个 到 达 目 的 地 也 总 无 价值 。 
攀 上 正确 的 梯子 ， 加入 ， 


成 100% ~ 


图 2-13 换行 标签 
a 
和 2.8.3 不 换行 标签 
在 网 页 排版 中 ， 如 文章 列表 、 标 题 排版 时 ， 无 论 多 少 文字 均 不 希望 换行 显示 ， 需 要 强制 在 一 行 显示 内 
容 ， 这 时 就 需要 使 用 不 换行 标签 <nobr> 来 实现 。 不 换行 内 容 放 入 <nobr> 与 </nobr> 之 间 即 可 。 如 不 遇 到 <br/> 


换行 标签 ， 内 容 在 一 行 显示 完 ， 如 遇 到 <br> 换 行 标签 ， 内 容 将 在 加 <br> 换 行 自动 换行 。 
【 例 2-10】 (实例 文件 ，ch02\Chap2.10.html) 不 换行 标签 。 
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相关 的 代码 实例 请 参考 Chap2.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-14 所 示 。 


图 2-14 不 换行 标签 


2.9 其 他 标签 
在 前 面 已经 介绍 了 许多 经 党 使 用 的 标签 ， 下 面 介绍 一 些 其 他 的 标签 。 


2.9.1 水平线 标 签 


在 网 页 中 ,如 果 想 要 将 上 下 内 容 分 隔 开 ， 可 以 使 用 水 平 线 标签 <hr>，<hr> 水 平 线 特 的 点 是 100% 宽 度 水 平分 隔 
线 ， 并 且 独 占 一 行 ，<hr> 水 平 线 将 上 下 内 容 分 隔 一 定 距离 。 
【 例 2-11】 实例 文件 ，ch02\Chap2.11.html》 水 平 线 标签 。 
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<body> 

<div></div> 

一 位 哲人 曾经 说 过 : "人 生 最 大 的 悲剧 莫 过 于 ,人们 毕 其 一 生 的 时 间 , 努 力 去 攀登 成 功 的 梯子 , 当 爬 到 梯子 的 顶部 时 , 才 匈 然 发 现 ， 
这 个 梯子 靠 在 了 一 个 错误 的 建筑 上 。" 


<hr> 
倘若 目标 错 了 ,那么 无 论 你 在 梯子 上 佛 登 得 多 快 , 击 登 得 多 高 , 哪怕 是 第 一 个 到 达 目 的 地 也 毫 无 价值 。 攀 上 正确 的 梯子 , 才 是 最 为 
重要 的 事情 。 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap2.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-15 所 示 。 
LETTTTTEIITT EY 
文件 有) 并 各 ( 昌 查看 (V) 中 辣 FA) 工具 (1 禹 名 (H) 
一 他 哲人 佛经 说 过 ，“ 人 生 最 大 的 非 剧 英 过 于 ， 人 们 毕 其 一 生 的 时 间 ， 努 力 
2 当 有 到 梯子 的 顶部 时 ， 才 猛然 发 现 ， 这 个 梯子 等 在 了 
目标 诺 了 ， 韦 么 元 论 你 在 梯子 上 攀登 得 多 快 ， 虱 侣 得 多 高 ， 哪 怕 是 
EL a 从 上 正确 的 梯子 ， 才 是 最 为 重 英 的 事情 、 
100% 
图 2-15 ”水平线 标签 
回 
2.9.2 插入 空格 


通常 情况 下 , 都 是 使 用 空格 键 来 插入 多 个 空格 , 而 在 编写 代码 中 , 通过 空格 键 打出 的 空格 , 会 被 HTML 
自动 忽略 。HTML 将 这 样 的 空格 视 为 空白 字符 ， 并 显示 为 单个 空白 间隔 。 在 HTML 5 中 ， 经 常 使 用 &nbsp: 来 
插入 空格 。 
【 例 2-12】 实例 文件 ，ch02\Chap2.12.html) 插入 空格 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 插 入 空格 </title> 

</head> 

<body> 

空 snbsp; snbsp; snbsp; snbsp; snbsp; 格 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap2.12.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-16 所 示 。 


- oO x 
下 CWscrWdministrat 从- 6 | 硬 托 和 这 和 改 
文 外 骨 篇 名 下， 二 看 MV) 收 雪夫 (A) 工具 mm 帮助 IH) 


空 格 


大 300%6 ~ 


2-16 插入 空格 
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2.9.3 ”插入 特殊 字符 


如 果 要 在 标签 中 插入 特殊 字符 ， 可 以 使 用 “&” 开 头 、“:” 结 尾 ， 中 间 加 上 特殊 字符 对 应 的 编码 即 可 ， 
如 上 面 介绍 的 空格 。 假 如 要 在 HTML 插入 小 于 号 ， 只 需 在 要 使 用 的 位 置 插 入 “&lt ” 即 可 。 具 体 代码 参考 
下 面 案例 。 

【 例 2-13】〔 实 例文 件 ，ch02\Chap2.13.html) 插入 特殊 字符 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 插 入 特殊 字符 </title> 
</head> 
<body> 
<input type="text" value="l&1t;10"> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap2.13.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 2-17 所 示 。 
Eat 口 x 
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图 2-17 插入 特殊 字符 


2.10 ”就 业 面试 技巧 与 解析 


2.10.1 ”面试 技巧 与 解析 (一) 


面试 官 : HTML 5 中 新 多 媒体 元 素 有 哪些 ? 

应 聘 者 : HTML 5 中 新 多 媒体 元 素 有 以 下 4 种。 

audio 元 素 : Audio 元 素 主要 是 定义 播放 声音 文件 或 者 音频 流 的 标准 。 

video 元 素 : video 元 素 主要 是 定义 播放 视频 文件 或 者 视频 流 的 标准 。 

<source> 元 素 : <source> 元 素 为 媒体 元 素 定义 媒体 资源 ，<source> 元 素 允 许 用 户 规定 两 个 视频 /音频 文件 
共 浏 览 器 ， 根 据 它 对 媒体 类 型 或 者 编 解码 器 的 支持 进行 选择 。 

embed 元 素 : embed 元 素 用 来 插入 各 种 多 媒体 ， 其 格式 可 以 是 MIDI、WAV、AIFF、AU、MP3 等 。 
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0.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : HTML 5 中 分 组 元 素 有 哪些 ? 

应 聘 者 : HIML 5 中 分 组 元 素 有 如 下 3 种 : 

<hgroup> 元 素 用 于 对 网 页 或 区 段 (section) 的 标题 进行 组 合 ，<hgroup> 元 素 通常 会 将 h1 一 h6 元 素 进行 
分 组 ， 比 如 一 个 内 容 区 块 的 标题 及 其 子 标题 算 一 组 。 

<figure> 标 签 用 来 表示 网 页 上 一 块 独立 的 内 容 ， 将 其 从 网 页 上 移 除 后 不 会 对 网 页 上 的 其 他 内 容 产生 影 
响 。 

<figcaption> 元 素 的 作用 是 为 <figure> 元 素 定义 标题 。 
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二 学 习 指引 


对 于 网 页 设计 而 言 ，CSS 就 像 一 支 画 笔 ， 可 以 匀 勒 出 优美 的 画面 ， 它 可 以 根据 设计 者 的 要 求 对 页 面 的 
布局 、 颜 色 、 字 体 、 背 景 和 其 他 图 文 效 果 进行 控制 ， 可 以 说 CSS 是 网 页 设计 中 不 可 缺少 的 重要 内 容 。 


”重点 导读 


。 了 解 CSS 样式 表 。 

。 热 悉 CSS 样式 表 的 基本 语法 。 

* 掌握 HTML 网 页 应 用 CSS 样式 的 方法 。 
。 热 悉 CSS 三 大 特性 。 

。 热 悉 在 脚本 中 修改 显示 样式 。 


3.1 CSS 概述 


CSS 样式 的 使 用 ,减少 了 在 HTML 中 重复 的 格式 设置 ， 如 网 页 的 颜色 、 字 体 和 大 小 等 。 另 外 ， 在 后 期 
的 维护 中 ， 如 果 需 要 修改 部 分 外 观 样式 ， 只 需要 修改 相应 的 代码 即 可 。 


3.1.1 CSS 概述 


CSS 被 称 为 层 笃 样式 单 ， 它 是 一 种 专门 描述 结构 文档 的 表现 方式 的 文档 ， 主 要 用 于 网 页 风格 设计 ， 包 
括 字 体 大 小 、 颜 色 、 背景 以 及 元 素 的 精确 定位 等 。 在 传统 的 Web 网 页 设计 里 , 使 用 CSS 能 让 单调 的 HTML 
网 页 更 富 表现 力 。 

CSS 样式 的 使 用 ， 使 “网 页 结构 代码 ”和 “网 页 格式 风格 代码 ”分 离开 ， 将 站 点 上 的 所 有 网 页 都 指向 
某 个 CSS 文件 ， 遇 到 要 修改 时 ， 只 需 更 改 该 CSS 文件 就 可 以 了 。 不 仅 维护 简单 ， 还 可 以 使 HTML 文档 代 
码 简练 ， 缩 短 浏览 器 的 加 载 时 间 。W3C 组 织 也 大 力 提倡 使 用 样式 单 来 描述 结构 文档 的 显示 效果 。 
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3.1.2 CSS 的 发 展 历史 


CSS 的 最 新 版 是 CSS 3， 目 前 正 处 于 进一步 完善 中 。 下 面 简单 地 介绍 一 下 CSS 的 发 展 历史 。 

CSS 1.0: 1996 年 12 月 ，CSS 1.0 作为 第 一 个 正式 规范 面试 ， 其 中 已 经 加 入 了 字体 、 颜 色 等 相关 属性 ; 

CSS 2.0: 1998 年 5 月 ，CSS 2.0 规 范 正式 推出 ， 这 个 版 本 的 CSS 也 是 最 广为人知 的 一 个 版 本 ， 以 前 的 前 
端 开发 者 使 用 的 一 般 就 是 这 个 CSS 规范 ; 

CSS 2.1: 2004 年 2 月 ，CSS 2.1 对 原来 的 CSS 2.0 进行 了 一 些小 范围 的 修改 ， 删 除了 一 些 浏览 器 支持 
不 成 熟 的 属性 ， 我 们 可 以 认为 CSS 2.1 是 CSS 2.0 的 修订 版 ; 

CSS 3: 2010 年 CSS 3 规范 推出 ， 这 个 版 本 完善 了 前 面 CSS 存在 的 一 些 不 足 ， 例 如 : 颜色 模块 增加 了 
色彩 校正 、 透 明度 等 功能 ， 还 增加 了 变形 和 动画 模块 等 。 


3.1.3 CSS 3 的 新 功能 


CSS 3 新 增 了 许多 的 新 功能 ， 以 前 很 多 效果 都 需要 借助 脚本 或 者 图 片 才能 实现 ， 使 用 CSS 3 只 需要 几 
行 代码 就 能 搞定 了 ， 具 体 的 一 些 新 功能 如 表 3-1 所 示 。 


表 3-1 CSS 3 新 增 功能 


新 功能 说 明 


选择 器 CSS 3 增加 了 许多 更 强大 的 选择 器 

边框 CSS 3 可 以 创建 贺 角 边框 、 阴 影 、 边 框 背景 等 

文字 效果 使 用 CSS 3， 设计 者 可 以 使 用 自己 喜欢 的 任何 字体 ， 只 需 把 自己 喜欢 的 字体 引入 网 站 中 就 可 以 实现 了 
背景 CSS 3 背景 包含 了 新 属性 ， 包 括 背 景 图 片 的 大 小 、 裁 剪 背景 图 片 、 背 景 图 片 的 定位 等 

渐变 CSS 3 定义 了 线性 渐变 和 径 向 渐变 

多 列 布局 为 页 面 布 局 提供 了 更 多 的 手段 

动画 CSS 3 动画 使 得 设计 者 不 需要 编写 脚本 代码 ， 也 可 以 让 页 面 元 素 动 起 来 

媒体 查询 可 以 根据 不 同 的 设备 、 不 同 的 屏幕 来 调整 页 面 


3.2 CSS 的 基本 语法 


CSS 的 语法 非常 简单 ，CSS 语法 规则 由 两 个 主要 的 部 分 构成 ， 分 别 是 选择 器 ， 以 及 一 条 或 多 条 声明 ， 
具体 语法 结构 如 图 3-1 所 示 。 


a 
了 {[color]ealleont-sizel 20pz|; } 


™ 


3-1 语法 结构 
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选择 器 通常 是 用 户 需要 改变 样式 的 HTML 元 素 ， 选 择 器 直接 与 HIML 代码 对 应 ， 声 明 (declaration) 
非常 人 性 化 ， 属 性 〈property) 是 用 户 希望 设置 的 样式 属性 (style attribute)， 绝 大 部 分 属性 名 都 是 有 含义 的 
英文 单词 或 词组 ， 每 个 属性 对 应 一 个 值 ， 属 性 值 大 部 分 也 是 直接 用 有 意义 的 单词 表示 ， 例 如 颜色 值 可 以 取 
blue、red 和 yellow， 预 设 的 border 样式 有 solid 和 dashed， 属 性 和 值 之 间 用 冒号 分 开 。 

CSS 语法 具有 很 高 的 容错 性 ， 即 一 条 错误 的 语句 并 不 会 影响 之 后 语句 的 解析 ， 代 码 如 下 ; 


<style> 

hi{ 
color:blue /* 这 里 没有 分 号 ,导致 语法 错误 */ 
font-size:20px /* 这 条 声明 不 会 被 应 用 */ 

} 

h2{ 
-color:red; /* 对 于 不 识别 的 属性 名 , CSS 将 自动 息 略 */ 


font-size:22px; /* 前 面 的 错误 不 影响 这 条 声明 的 作用 */ 
1 
</style> 


注意 : 虽然 CSS 的 容错 性 非常 高 ， 但 是 在 编写 的 过 程 中 也 要 注意 语法 错误 的 检查 ， 用 户 可 以 使 用 CSS 
Lint、Dreamweaver 等 工具 来 检查 CSS 语法 格式 。 


3.3 HTML 网 页 应 用 CSS 样式 的 方法 


CSS 可 以 控制 HTML 文档 的 显示 , 但 在 控制 文档 显示 之 前 ， 需 要 在 文档 中 引入 CSS 样式 , HTML 提供 
了 4 种 引入 方式 ， 包 括 行内 样式 、 内 榜样 式 、 链 接 样式 和 导入 样式 。 


3.3.1 使 用 行内 样式 表 


行内 样式 是 最 为 简单 的 CSS 设置 方式 , 需要 给 每 一 个 标签 都 设置 style 属性 。 它 和 样式 所 定义 的 内 容 在 
同一 代码 行内 ， 通 常用 于 精确 控制 一 个 HTML 元 素 的 表现 ， 代 码 如 下 : 

<p style="color:red"> 行 内 样式 表 </p> 

【 例 3-1】〔 实 例文 件 ，ch03\Chap3.1.html) 行内 样式 表 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<!-- 设 置 所 有 了 标签 的 字体 颜色 为 红色 字体 大 小 为 20 像素 字体 类 型 为 微软 雅 黑 --> 
<p style="color: red;font-size: 20px;font-family: 微软 雅 黑 ;"> 使 用 行内 样式 表 1</p> 
<p style="color: red;font-size: 20px;font-family: 微软 雅 黑 ;"> 使 用 行内 样式 表 2</p> 
<p style="color: red;font-size: 20px;font-family: 微软 雅 黑 ;"> 使 用 行内 样式 表 3</p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap3.1.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-2 所 示 。 


Bs 


029 


FN 
HTML 5+CSS 3 从 入 门 到 项 目 实践 
Le +JavaScript ( 超 信 版 ) 


这 种 样式 表 不 经 常用 ，CSS 样式 与 HTML 结构 没有 分 离 ， 导 致 代码 匈 余 ， 并 且 不 利于 维护 。 


.3.2 ”使 用 内 部 CSS 
内 部 CSS 样式 表 一 般 是 将 CSS 写 在 <head></head> 标 签 中 ， 并 使 用 <style></style> 标 签 进 行 声明 ， 代 码 


如 下 : 


【 例 3-2】 “实例 文件 ，ch03\Chap3.2.html》 内 部 样式 表 。 


相关 的 代码 实例 请 参考 Chap3.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-3 所 示 。 


第 图 章 css 3 基础 入 门 


3.3.3 引入 外 部 样式 表 


引入 外 部 样式 表 是 使 用 频率 最 高 、 也 是 最 为 实用 的 方法 。 它 将 HTML 页 面 本 身 与 CSS 样式 风格 分 离 为 “ 
两 个 或 者 多 个 文件 , 实现 了 页 面 框架 HTML 代码 与 美工 CSS 代码 的 完全 分 离 ， 使 得 前 期 制作 和 后 期 维护 都 
十 分 方便 。 
引入 外 部 样式 表 是 指 在 外 部 定义 CSS 样式 表 并 形成 以 “.css” 为 扩展 名 的 文件 , 然后 在 页 面 中 通过 <link> 
引入 页 面 中 ， 代 码 如 下 : 
<link rel="stylesheet" href="stylel"/> 
rel: 指定 引入 样式 表 ， 其 值 为 stylesheet。 
href 指定 了 CSS 样式 表 的 位 置 ， 此 处 表示 当前 路 径 下 名 称 为 stylel.css 文件 。 
【 例 3-3】 (实例 文件 ，ch03\Chap3.3.html) 引入 外 部 样式 表 。 
<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
/* 引 入 stylel.css 文件 */ 
<link rel="stylesheet" href="stylel.css"> 
</head> 
<body> 
<p> 导 入 外 部 样式 表 </p> 
<p> 导 入 外 部 样式 表 </p> 
<p> 导 入 外 部 样式 表 </p> 
</body> 
</html> 


引入 的 外 部 样式 表 stylel.css 代码 : 


Pi 


color: green; /# 设 置 p 标签 的 字体 颜色 */ 

font-size: 20px; /* 设 置 吕 标签 的 字体 大 小 */ 

font-family: 隶书 ; /* 设 置 p 标签 的 字体 类 型 */ 
1 


相关 的 代码 实例 请 参考 Chap3.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-4 所 示 。 
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图 34 引入 外 部 样式 表 作 用 效果 


3.3.4 ”导入 外 部 样式 文件 
导入 外 部 样式 文件 是 指 在 内 部 样式 表 的 <style> 标 记 中 ， 使 用 @import 导入 一 个 外 部 样式 表 ， 代 码 如 下 : 
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【 例 3-4】 (实例 文件 ，cho3\Chap3.4.html) 导入 外 部 样式 表 。 


在 上 面 的 代码 中 导入 的 外 部 样式 文件 style2.css 代码 : 


ss » | 
图 3-5 导入 外 部 样式 表 作用 效果 


.3.5 注释 CSS 


如 果 在 开发 CSS 中 遇 到 需要 特别 说 明 的 地 方 ， 可 以 使 用 CSS 注释 进行 注解 说 明 ， 有 利于 其 他 程序 员 理 
解 你 开发 的 CSS 代码 。 
要 注释 CSS 样式 表 ， 只 需要 在 注释 的 内 容 前 使 用 “/*+” 标 记 开始 注释 ， 在 内 容 的 结尾 使 用 “*/” 结 束 


注释 。 代 码 如 下 : 
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<style> 
Pt 
color: blue; /# 设 置 p 标签 的 字体 颜色 */ 
font-size: 20px; /* 设 置 p 标签 的 字体 大 小 */ 
font-family: 宋体 ; /* 设 置 p 标 签 的 字体 类 型 */ 
} 
</style> 


3.4 CSS 三 大 特性 
CSS 三 大 特性 一 一 层 双 性、 继承 性 和 优先 性 。 


3.4.1 CSS 层 又 性 


层 共性 就 是 处 理 CSS 冲突 的 能 力 。 当 同一 个 元 素 被 两 个 选择 器 选中 时 ，CSS 会 根据 选择 器 的 权重 决定 
使 用 哪 一 个 选择 器 。 权 重 低 的 选择 器 效果 会 被 权重 高 的 选择 器 效果 覆盖 掉 ， 权 重 相 同时 取 后 者 。 

权重 可 以 理解 为 一 个 选择 器 对 于 这 个 元 素 的 重要 性 。id 选择 器 权重 为 100， 类 选择 器 权重 为 10， 标 签 
选择 器 的 权重 为 1， 如 图 3-6 所 示 。 


二 


一 


标 竺 法 尝 器 


Meolor red;} 
+ 


ol 


权重 100+10+1 = 111 
图 3-6 权重 
【 例 3-5】 (实例 文件 ，ch03\Chap3.5.html) CSS 层 释 性 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
#box Pi 
color: yellow; /* 设 置 #box P 元 素 的 字体 颜色 为 黄色 */ 
} 
#box .box{ 
color:red; /* 设 置 #box .box 元 素 的 字体 颜色 为 红色 */ 
} 
</style> 
</head> 
<body> 
<div id="box"> 
<p class="box"> 我 是 什么 颜色 呢 ? </p> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap3.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-7 所 示 。 
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我 是 什么 颜色 呢 ? 


图 3-7 层 到 性 


3.4.2 ”CSS 继承 性 


继承 性 是 子 元 素 继承 父 元 素 样式 的 特性 , 在 CSS 中 以 text-、font-、line- 开 头 的 属性 以 及 color 属性 都 可 
以 继承 。 

有 一 些 比较 特殊 的 元 素 ， 如 <a> 标 签 的 颜色 不 能 继承 ， 必 须 对 <a> 标 签 本 身 进行 设置 ，<h> 标 签 的 字体 
大 小 不 能 继承 ， 必 须 对 <h> 标 签 本 身 进行 设置 。 

【 例 3-6】 (实例 文件 ，cho3\Chap3.6.html) CSS 继承 性 。 


相关 的 代码 实例 请 参考 Chap3.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-8 所 示 。 


第 贺 章 css 3 基础 入 门 


可 以 看 到 , 我 们 只 给 div 设置 了 样式 ，3 个 子 元 素 都 继承 了 父 元 素 的 样式 ， 除 了 <a> 标 签 没有 继承 颜色 ， 
<h> 标 签 没有 继承 字体 大 小 。 


3.4.3 CSS 优先 性 


当 不 同 的 规则 作用 到 同一 个 html 元 素 上 时 ， 如 果 定 义 的 属性 有 冲突 ， 那 么 应 该 用 谁 的 值 ? CSS 有 一 套 
优先 性 的 定义 ， 顺 序 如 下 : 
!important> 行 内 样式 >ID 选择 器 > 类 选择 器 > 标签 选择 器 > 通配符 > 继承 > 浏览 器 默认 属性 值 。 
【 例 3-7】 (实例 文件 ，cho3\Chap3.7.html) CSS 优先 性 。 


相关 的 代码 实例 请 参考 Chap3.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-9 所 示 。 
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3.5 在 脚本 中 修改 显示 样式 


在 很 多 情况 下 ， 需 要 使 用 脚本 来 动态 控制 页 面 的 显示 效果 ， 实 现 起 来 也 很 简单 ， 只 需要 在 脚本 中 获取 


到 该 元 素 ， 然 后 修改 它 的 CSS 样式 就 可 以 了 。 


3.5.1 ”随机 改变 页 面 的 背景 色 


随机 改变 页 面 的 背景 颜色 很 简单 ， 这 里 我 们 使 用 “rgb (ab.c)” 属 性 来 实现 ， 只 需要 随机 生成 a、b、c 
的 值 就 可 以 了 ，a、b、c 取 值 在 0 一 256， 具 体 请 看 下 面 的 实例 。 
【 例 3-8】 (实例 文件 ，ch03\Chap3.8.html) 随机 改变 背景 色 。 


<!DocTYPE html> 
<html> 
<head> 
‘<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body id="body"> 


<input type='button' value=' 刷 新 页 面 , 随 机 切换 背景 颜色 ' /> 


</body> 
</html> 
<script> 


Var r = Math.floor (Math.random() * 256); 
var g = Math.floor (Math.random() * 256); 
var b = Math.floor (Math.random() * 256); 


var color='rgb(${r},${g}, ${b}) "7 
var bd=document .getElementById ("body") 
bd.style.background=color; 

</script> 


// 随 机 生成 256 以 内 的 值 ， 赋 值 给 变量 工 
// 随 机 生成 256 以 内 的 值 ， 赋 值 给 变量 g 
7/ 随 机 生成 256 以 内 的 值 ， 赋 值 给 变量 b 
// 使 用 ES6 语法 拼接 rgb 格式 颜色 

// 获 取 页 面 中 的 body 元 素 

// 设 置 body 元 素 的 背景 为 color 


相关 的 代码 实例 请 参考 Chap3.8.html 文件 ， 在 Chrome 浏览 器 中 运行 的 结果 如 图 3-10 所 示 。 每 当 刷 新 


页 面 时 ， 页 面 背景 颜色 会 随机 改变 ， 如 图 3-11 所 示 。 


刷新 页 面 ， 随 机 切 绚 背景 颜色 


图 3-10 页面 加 载 完成 时 的 效果 


3.5.2 ”动态 增加 立体 效果 


3-11 刷新 页 面 后 的 效果 


在 CSS 中 ， 通 过 简单 的 色差 来 实现 简单 的 立体 效果 。 如 下 面 的 案例 ， 分 别 设置 div 四 边 边框 的 颜色 ， 
产生 了 一 个 色差 ， 呈 现 出 立体 的 效果 。 同 时 还 添加 了 一 个 按钮 ， 来 动态 控制 立体 效果 。 当 单 击 按钮 时 ，div 


呈现 立体 效果 。 
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【 例 3-9】 实例 文件 ，ch03\Chap3.9.html) 动态 增加 立体 效果 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
-show{ 
width:150px; /* 设 置 宽度 */ 
height: 50px; /* 设 置 高 度 */ 
text-align:center; /* 设 置 文本 水 平 居 中 */ 
line-height:50px; /* 设 置 季 直 居中 */ 
border-right:#222222 20px solid; /* 设 置 右边 框 */ 
border-bottom:#222222 20px solid;  ”/* 设 置 底 边 框 */ 
border-left:#dddddd 20px solid; /* 设 置 左边 框 */ 
border-top:#dddddd 20px solid; /* 设 置 上 边框 +/ 
background-color:#cccccc; /* 设 置 背 景 颜色 */ 
ee 
</head> 
<body> 


<input type='button' value=' 动 态 增加 立体 效果 'onclick="change()"/><hr/> 
<div id="box"> 立 体 效 果 </div> 
</body> 
</html> 
<script> 

// 定 义 change 函数 

function change (){ 

document .getElementById ("box") .className="show"; // 给 box 添加 show 样式 


y 
</script> 


相关 的 代码 实例 请 参考 Chap3.9.html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 3-12 所 示 。 当 单 击 “ 动 态 增 
加 立体 效果 ”时 ， 页 面 显示 效果 如 图 3-13 所 示 。 


a 

ET 动态 增加 立体 效果 

A 
动态 增加 立体 效果 
立体 效果 
立体 效果 
NE a 
图 3-12 ”页面 加 载 完 成 效果 图 3-13 单 击 按钮 后 效果 


3.6 ”实践 案例 一 一 设计 登录 和 注册 界面 


在 平时 浏览 网 页 时 ， 经 常会 遇 到 让 我 们 输入 信息 的 界面 ， 登 录 后 才能 查看 一 些 信息 ， 如 果 没有 在 该 网 
站 注册 过 ， 还 需要 先 注册 信息 。 本 案例 也 来 实现 一 个 简单 的 登录 注册 界面 。 
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设计 HTML 结构 ， 代 码 如 下 : 


100% ”| 
图 3-14 没 设 置 CSS 的 页 面 效果 
然后 给 每 个 元 素 添加 CSS 样式 ， 全 部 代码 如 【 例 3-10 】 所 示 。 
【 例 3-10】〗】 (实例 文件 ,ch03\Chap3.10.html) 登录 注册 界面 设计 。 
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border: lpx solid white; /* 设 置 边框 */ 

display: block; /* 设 置 input 为 块 级 元 素 */ 
margin: 10px auto; 

padding: 5px; 

width: 230px; 


border-radius: 15px; /+ 设置 图 角 边框 */ 
font-size: 18px7 
font-weight: 300; /# 设 置 字体 加 粗 */ 


text-align: center; 

» 

button { 
background-color: #20a7ff; 
border-radius: 10px; 
border: 0; 
height: 30px; 
width: 80px; 


padding: Spx; 
color: white; /* 设 置 字体 颜色 */ 
</style> 
</head> 
<body> 


<div class="content"> 
<div class="main"> 
<h2>You are welcome! </h2> 
<form> 
<input type="text" placeholder=" 用 户 名 "/> 
<input type="password" placeholder=" 密 码 "> 
<p> 
<button type="submit"> 登 snbsp; gnbsp; 录 </button> 
<button type="submit"> 注 &nbsp; &nbsp; 册 </button> 


</p> 
</form> 
</div> 
</div> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap3.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 3-15 所 示 。 


三 百 六 
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图 3-15 登录 和 注册 完成 界面 
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3.7 ”就 业 面试 技巧 与 解析 


3.7.1 ”面试 技巧 与 解析 (一) 


面试 官 : 在 加 载 CSS 文件 时 ，link 引入 外 部 样式 和 @import 导入 外 部 样式 有 什么 区 别 ? 

应 聘 者 : link 与 @import 在 显示 效果 上 还 是 有 很 大 区 别 的 ，link 的 加 载 会 在 页 面 显示 之 前 全 部 加 载 完 ， 而 
@import 是 读 取 完 文件 之 后 再 加 载 ， 所 以 ， 在 网 络 速度 很 好 或 很 快 的 情况 下 , 会 出 现 刚 开始 没有 CSS 定义 ， 
而 后 才 加 载 CSS 定义 ，@import 加 载 页 面 时 开始 的 瞬间 会 有 闪烁 〈 无 样式 表 的 页 面 )， 然 后 恢复 正常 (加载 
样式 后 的 页 面 )，link 没有 这 个 问题 。 所 以 推荐 使 用 link 引入 外 部 样式 。 


3.7.2 面试 技巧 与 解析 (二 ) 


面试 官 : CSS hack 是 什么 ? 

应 聘 者 : CSS hack 是 根据 不 同 的 浏览 器 编写 不 同 的 CSS 样式 。 由 于 不 同 厂商 的 浏览 器 ， 例 如 IE、 
Firefox、Chrome 等 ， 或 者 是 同一 厂商 的 浏览 器 的 不 同 版 本 ， 如 正 6 和 正 7， 对 CSS 的 解析 认识 不 完全 一 
样 ， 会 导致 生成 的 页 面 效 果 不 一 样 ， 得 不 到 我 们 所 需要 的 页 面 效果 。 这 个 时 候 我 们 就 需要 针对 不 同 的 浏览 
器 去 写 不 同 的 CSS， 让 它 能 够 同时 兼容 不 同 的 浏览 器 ， 能 在 不 同 的 浏览 器 中 显示 我 们 想 要 的 页 面 效 果 。 


第 4 章 
CSS 3 样式 选择 器 


EY 学 习 指引 


选择 器 (selector) 是 CSS 中 很 重要 的 概念 ， 所 有 HTML 语言 中 的 标记 都 是 通过 不 同 的 CSS 选择 器 进 
行 控制 的 。 


全 ”重点 导读 


。 了 解 选择 器 的 分 类 。 
“掌握 基本 选择 器 的 用 法 。 
“掌握 层次 选择 器 的 用 法 。 

* 掌握 动态 伪 类 选择 器 的 用 法 。 

“掌握 CSS 新 增 的 伪 类 选择 器 的 用 法 。 
“掌握 属性 选择 器 的 用 法 。 


4.1 选择 器 分 类 


在 CSS 3 中， 大 致 可 以 把 CSS 选择 器 分 成 5 类， 分 别 是 基本 选择 器 、 层 次 选择 器 、 伪 类 选择 器 、 属 性 
选择 器 、 伪 元 素 选择 器 。 其 中 层次 选择 器 包括 子 选 择 器 、 兄 弟 选择 器 、 相 邻 选择 器 、 包 含 选择 器 和 分 组 选 
择 器 。 在 下 面 章节 中 将 详细 介绍 。 


4.2 ”基本 选择 器 


基础 选择 器 是 编写 CSS 样式 经 常用 到 的 选择 器 ， 它 包括 元 素 选 择 器 、 通 配 选 择 器 、ID 选择 器 、class 
选择 器 和 群 组 选择 器 。 下 面 分 别 介绍 它们 。 
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如 4.2.1 元素 选择 器 


标签 选择 器 又 称 为 标记 选择 器 ， 在 W3C 标准 中 ， 又 称 为 类 型 选择 器 (type selector)。CSS 标签 选择 器 
用 来 声明 html 标签 采用 哪 种 CSS 样式 ， 也 就 是 重新 定义 了 html 标签 。 因 此 ， 每 一 个 html 标签 的 名 称 都 可 
以 作为 相应 的 标签 选择 器 的 名 称 。 

例如 ，p 选择 器 就 是 用 于 声明 页 面 中 所 有 <p> 标 签 的 样式 风格 。 同 样 ， 可 以 通过 hl 选择 器 来 声明 页 面 
中 所 有 的 <h1> 标 签 的 CSS 样式 风格 ， 具 体 代码 如 下 : 


<style> 
h1{ 
color:red; /* 设 置 hl 标签 的 字体 颜色 */ 
font-size:14px; /* 设 置 bl 标签 的 字体 大 小 */ 
} 
</style> 
以 上 CSS 代码 声明 了 html 页 面 中 所 有 <h1> 标 签 ， 文 字 的 颜色 都 采用 红色 ， 大 小 都 为 14px。 
每 一 个 CSS 选择 器 都 包括 选择 器 、 属 性 和 值 ， 其 中 属性 和 值 可 以 为 一 个 ， 也 可 以 设置 多 个 ， 从 而 实现 
对 同一 个 标签 声明 多 种 样式 风格 的 目的 ， 如 图 4-1 所 示 。 


声明 了 
hl 


和 中 font-size: 14px; | } 
| 
选择 器 ”属性 值 属性 


4-1 标签 选择 器 的 结构 


在 这 种 格式 中 ， 既 可 以 声明 一 个 属性 和 值 ， 也 可 以 声明 多 个 属性 和 值 ， 根 据 具体 情况 而 定 。 当 然 ， 还 
有 另外 一 种 常用 的 声明 格式 ， 如 图 4-2 所 示 。 


声明 分 号 声明 

| 中 
[ni {| color: cl [pee 14px|} 
选择 器 ”属性 值 属性 


图 4-2 标签 选择 器 声明 格式 
在 这 种 格式 中 ， 每 一 个 声明 都 不 带 分 号 ， 而 是 在 两 个 声明 之 间 用 分 号 隔 开 。 同 样 ， 即 可 以 声明 一 个 属 
性 和 值 ， 也 可 以 声明 多 个 属性 和 值 。 
注意 : CSS 对 于 所 有 的 属性 和 值 都 有 相对 严格 的 要 求 。 如 果 声 明 的 属性 或 值 不 符合 该 属性 的 要 求 ， 则 
不 能 使 该 CSS 语句 生效 。 


名 4 .2.2 通 配 选择 器 


通 配 选 择 器 用 一 个 “* ”表示 。 单 独 使 用 时 ， 这 个 选择 器 可 以 与 文档 中 的 任何 元 素 匹 配 ， 就 像 一 个 通 配 
符 。 如 让 页 面 上 的 所 有 文本 都 为 红色 ， 代 码 如 下 : 


*{color:red;} 
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当然 也 可 以 选择 某 个 元 素 下 的 所 有 元 素 。 在 与 其 他 选择 器 结合 使 用 时 ， 通 配 选 择 器 可 以 对 特定 元 素 的 
所 有 后 代 应 用 样式 。 如 为 div 元 素 的 所 有 后 代 添加 一 个 红色 背景 ， 代 码 如 下 ; 

div *{background: red;} 

虽然 通 配 选 择 器 的 功能 强大 ， 但 是 出 于 效率 考虑 ， 尽 量 少 使 用 它 。 在 各 个 浏览 器 中 ， 每 个 元 素 上 的 默 
认 边 距 都 不 一 致 ， 为 了 保证 页 面 能 够 兼容 多 种 浏览 器 ， 通 常 在 Reset 样式 文件 中 ， 使 用 通 配 选择 器 进行 重 
置 ， 来 覆盖 浏览 器 的 默认 规则 ， 代 码 如 下 : 


* { margin: 0; padding: 0; } 


4.2.3 ID 选择 器 


ID 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 ， 在 某 些 方面 ,ID 选择 器 类 似 于 类 选择 器 ,不 
过 也 有 一 些 重要 差别 。 首 先 ，ID 选择 器 前 面 有 一 个 # 号 ， 如 图 4-3 所 示 。 


图 4-3 ID 选择 器 结构 示意 图 
例如 : 下 面 的 两 个 ID 选择 器 ， 第 一 个 可 以 定义 元 素 的 颜色 为 红色 ， 第 二 个 定义 元 素 的 颜色 为 绿色 ， 


#red {color:red;} 
#green {color:green;} 


下 面 的 HTML 代码 中 ,id 属性 为 red 的 p 元 素 显示 为 红色 , 而 id 属性 为 green 的 p 元 素 显 示 为 绿色 。 


<p id="red"> 这 个 段落 是 红色 。</p> 
<p id="green"> 这 个 段落 是 绿色 。</p> 


注意 : id 属性 只 能 在 每 个 HTML 文档 中 出 现 一 次 。 
【 例 4-1】〔 实 例文 件 ，ch04\Chap4.1.html》ID 选择 器 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>ID 选择 器 </title> 


<style> 

#fontstyle{ 
color:blue; /* 设 置 #fontstyle 的 字体 颜色 */ 
font-size:20px; /* 设 置 #fontstyle 的 字体 大 小 */ 
font-weight:bold; /* 设 置 #fontstyle 的 字体 颜色 */ 

} 

#textstyle{ 
color:red; /* 设 置 #textstyle 的 字体 颜色 */ 
font-size:22px; /* 设 置 #textstyle 的 字体 大 小 */ 
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相关 的 代码 实例 请 参考 Chap4.1.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-4 所 示 。 可 以 看 到 标题 以 
蓝 色 字体 显示 ， 大 小 为 20px， 段 落 内 容 以 红色 字体 显示 ， 大 小 为 22px。 


图 4-4 ID 选择 器 应 用 实例 


4.2.4 ”class 选择 器 


类 选择 器 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 该 选择 器 可 以 单独 使 用 ， 也 可 以 与 其 他 元 素 
结合 使 用 ， 常 用 语法 格式 如 下 : 
classvalue {property:valve} 
classValue 是 选择 器 的 名 称 ， 具 体 名 称 由 CSS 制定 者 自己 命名 。 
【 例 4-2】〔 实 例文 件 ，ch04\Chap4.2.html》class 选择 器 。 
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</body> 
</html> 


相关 的 代码 实例 请 参考 Chap4.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-5 所 示 。 


三 -向 党 
司 cAUsersAdministrat -| 大 CAUsers MAdministra.. 
文件 月 多 声 FE) 到 看 V) 。 由 半 夫 A) 工具。 大 动 IH) 


静夜 思 
窗 前 明月 光 
疑 是 地 上 者 


号 100% ~ 


4-5 ”类 别 选择 器 应 用 实例 


4.2.5” 群 组 选择 器 


群 组 选择 器 实际 上 是 对 CSS 的 一 种 简化 写法 ,只 不 过 把 相同 定义 的 不 同 选择 器 放 在 一 起 ,用 “,” 分 开 ， 
这 样 样式 只 需要 编写 一 遍 节 ， 省 了 很 多 的 代码 。 假 果 我 们 想 要 给 <p> 和 <div> 元 素 同时 设置 黄色 背景 ， 就 可 
以 使 用 群 组 选择 器 。 

【 例 4-3】 实例 文件 ，ch04\Chap4.3.html) 和 群 组 选择 器 。 


<!DocTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<title>Title</title> 

<style> 

prdiv{ 
background:yellow; /# 设 置 p 和 div 标签 的 背景 颜色 为 黄色 #/ 


和 
</style> 
</head> 
<body> 
<p>p 元 素 的 背景 颜色 </p> 
<div>div 元 素 的 背景 颜色 </div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap4.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-6 所 示 。 


= 9 ¥% 
刁 csersWdninisvat PD- 0 | 站 The 
文 八里 (E】 可 二 (V) 收 训 (A) 工具 和 动 ” 


二 100% ~ 


图 4-6 群 组 选择 器 
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4.3 ”层次 选择 器 


层次 选择 器 是 通过 html 的 DOM 元 素 间 的 层次 关系 获取 元 素 ， 主 要 层次 关系 有 后 代 、 父 子 、 相 邻 兄弟 


和 通用 兄弟 。 


4.3.1 包含 选择 器 


包含 选择 器 又 叫 后 代 选 择 器 ， 作 用 的 是 选择 元 素 的 后 代 元 素 ， 包 括 子 元 素 、 子 元 素 的 子 元 素 等 ， 以 此 


类 推 。 包含 选择 器 与 子 元 素 选 择 器 之 间 使 用 空格 来 表示 关系 。 假 如 给 <div> 元 素 中 的 <p> 元 素 添加 黄色 背景 ， 
就 可 以 使 用 后 代 选 择 器 。 


【 例 4-4】 (实例 文件 ，ch04\Chap4.4.html) 包含 选择 器 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
ul.myList 1i af /* 后 代 选 择 器 */ 
text-decoration:none; /+ 去掉 <a> 标 签 的 下 画 线 */ 
color:red; /* 设 置 <a> 标 签 的 字体 颜色 */ 
</style> 
</head> 
<body> 
<ul class="myList"> 
<li> 
<a href="#"> 后 代 选 择 器 1</a> 
<ul> 
<li><a href="#"> 后 代 选 择 器 2</a></1i> 
<li><a href="#"> 后 代 选 择 器 2</a></1i> 
</ul> 
</1i> 
</ul> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap4.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-7 所 示 。 


司 CNuserswdministrat DP - 0 | 感 Tue 
文件 (月 篇 怠 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 ” 


4-7 包含 选择 器 
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4.3.2 子 选 择 器 


子 选择 器 用 来 选择 一 个 父 元 素 直接 的 子 元 素 ， 不 包括 子 元 素 的 子 元 素 ， 它 的 符号 为 大 于 号 “>”， 请 注 
意 这 个 选择 器 与 后 代 选择 器 的 区 别 ， 子 选择 器 (child selector) 仅 是 指 它 的 直接 后 代 ， 或 者 可 以 理解 为 作用 
于 子 元 素 的 第 一 个 后 代 ， 而 后 代 选 择 器 是 作用 于 所 有 子 后 代 元 素 。 后 代 选 择 器 通过 空格 来 进行 选择 。 

【 例 4-5】 实例 文件 ，ch04\Chap4.5.html) 子 选择 器 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
ul.myList > 1i > af /* 子 选择 器 */ 
text-decoration:none; /+ 去掉 <a> 标 签 的 下 画 线 */ 
color:red; /* 设 置 <a> 标 签 的 字体 颜色 */ 
t 
</style> 
</head> 
<body> 
<ul class="myList"> 
<li> 
<a href="#"> 子 选择 器 1</a> 
<ul> 
<1li><a href="#"> 子 选择 器 2</a></1i> 
<li><a href="#"> 子 选择 器 2</a></1i> 
</ul> 
</1i> 
</ul> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap4.5html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-8 所 示 。 
se 口 x 
站 CUsers Wdministrat PD - © BTtle 
文件 (六 名 (查看 (V) 收藏 夫 (A) 工具 (T) 帮助 
“ 子 选择 器 1 
* 
各 100% > 
图 4-8 子 选 择 器 


4.3.3 CSS 3 新 增 的 兄弟 选择 器 


兄弟 选择 器 用 来 设置 某 个 选择 器 兄弟 元 素 的 样式 。 兄 弟 选择 器 有 两 种 方式 ， 一 种 是 选择 元 素 后 面 一 个 
兄弟 元 素 ， 用 “+” 连 接 选 择 器 ， 另 一 种 是 选择 元 素 后 面 同一 类 指定 的 兄弟 元 素 ， 用 “一 ”连接 选择 器 。 
【 例 4-6】 (实例 文件 ， ch04\Chap4.6.html) 兄弟 选择 器 。 


<!DOCTYPE html> 
<html> 
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相关 的 代码 实例 请 参考 Chap4.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-9 所 示 。 
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4.4 动态 伪 类 选择 器 
伪 类 选择 器 并 不 是 针对 真正 的 元 素 使 用 的 选择 器 ， 只 针对 CSS 中 的 伪 元 素 起 作用 。 


4.4.1 内 容 相关 的 属性 


内 容 相关 的 属性 与 CSS 其 他 属性 一 样 ， 同 样 需要 定义 在 CSS 样式 的 大 括号 内 。content 属性 是 CSS 支 
持 的 内 容 相关 属性 中 最 重要 的 一 个 ， 该 属性 的 值 可 以 是 字符 串 、url、attr、open-quote 等 格式 ， 该 属性 用 于 
向 指定 元 素 之 前 或 之 后 插入 指定 内 容 。 

【 例 4-7】 (实例 文件 ，cho4\Chap4.7html) 内 容 相 关 的 属性 。 

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 


<title> 内 容 相 关 的 属性 </title> 


<style> 
ul{list-style: none;} /* 去 掉 ul 的 项 目 符号 */ 
li:before{ /* 在 每 个 1i 之 前 添加 的 内 容 "*/ 
content: "css 课程 : '; /* 设 置 添加 的 内 容 为 css 课程 : */ 
color: red; /* 设 置 添加 内 容 的 字体 颜色 */ 
} 
</style> 
</head> 
<body> 
<ul> 


<1i> 第 一 章 内 容 </1i> 
<1i> 第 二 章 内 容 </1i> 


<1i> 第 四 章 内 容 </1i> 
</ul> 

</body> 

</html> 


在 上 面 的 代码 中 ， 为 每 一 个 1 之 前 添加 字符 串 ， 并 设置 了 字体 颜色 为 红色 。 
相关 的 代码 实例 请 参考 Chap4.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-10 所 示 。 
be 口 x 
辐 cwsersWdminisvat p -6] 情 风 
文件 月 篇 尝 但 评 看 MV) 居室 夫人 A)， 工具 站) 


图 4-10 内容 相关 的 属性 


4.4.2 ”插入 图 像 
content 属性 值 除了 可 以 添加 字符 串 外 ， 还 可 以 添加 图 片 ， 代 码 如 下 。 
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stc 指定 图 片 的 路 径 。 
【 例 4-8】 〈 实 例文 件 ，cho4\Chap4.8html) 插入 图 片 。 


相关 的 代码 实例 请 参考 Chap4.8.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-11 所 示 。 


图 4-11 插入 图 像 


4.4.3 只 插入 部 分 元 素 
有 时 候 只 想 为 一 部 分 元 素 添加 内 容 ， 这 时 需 先 把 要 添加 内 容 的 元 素 找 到 ， 如 只 想 给 前 两 个 元 素 添加 内 
容 ， 只 需 找到 前 两 个 元 素 的 选择 器 ， 再 在 其 后 面 添加 伪 类 选择 器 ， 这 样 就 可 以 设置 其 内 容 了 。 


【 例 4-9】 (〈 实 例文 件 ， cho4\Chap4.9html) 只 插入 部 分 元 素 。 
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相关 的 代码 实例 请 参考 Chap4.10.html 文件 ， 正 浏览 器 中 运行 的 结果 如 图 4-12 所 示 。 


， 第 三 章 内 容 
。 第 加 章 内 容 


图 4-12 只 插入 部 分 元 素 


4.4.4 配合 quotes 属性 执行 插入 


quotes 属性 可 以 定义 open-quote 和 close-quote， 然 后 就 可 以 在 content 属性 中 应 用 它们 了 。 
【 例 4-10】 (实例 文件 ，cho4\Chap4.10.html) 配合 quotes 属性 执行 插入 。 
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相关 的 代码 实例 请 参考 Chap4.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-13 所 示 。 


4.4.5 配合 counter-increment 属性 添加 编号 


counter-increment 属性 用 于 定义 计数 器 ， 如 要 给 多 条 内 容 添加 编号 ， 就 可 以 通过 该 属性 来 设置 。 定 义 计 
数 器 很 简单 ， 只 需 给 需要 添加 编号 的 元 素 定 义 一 个 计数 器 ， 然 后 结合 content 属性 在 该 元 素 前 面 添加 这 个 计 
数 器 ， 就 可 以 实现 编号 了 。 

【 例 4-11】 (实例 文件 ，cho4\Chap4.11.html) 配合 unter-increment 属性 添加 编号 。 


052 


第 四 章 css 3 样式 选择 器 


<body> 

<ul> 
<1i> 第 一 章 内 容 </1i> 
<1i> 第 二 章 内 容 </1i> 
<1i> 第 三 章 内 容 </1i> 
<1i> 第 四 章 内 容 </1i> 

</ul> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap4.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-14 所 示 。 


站 CUsersAdministrat P -上 | 回 
文件 (F) ”六 编 (E) 查看 (V) 收藏 天 (A) 工具 Tm) ” 


1 第 一 章 内 容 加 
“第 二 章 内 容 
;第 三 章 内 容 
了 第 四 章 内 容 v 


4-14 ”计数 器 添加 编号 效果 


4.4.6 ”使 用 自 定义 编号 


从 上 面 的 案例 可 以 发 现 ，CSS 默认 的 编号 样式 是 数字 ， 但 有 时 我 们 还 需要 使 用 自 定义 编号 来 满足 不 同 
的 需要 。 我 们 可 以 通过 counter(name,list-style-type) 用 法 来 实现 使 用 自 定义 编号 ，name 是 计数 器 的 名 字 ， 
list-style-type 指定 自 定义 编号 的 样式 ， 它 的 一 部 分 取 值 如 表 4-1 所 示 。 


表 4-1 自 定义 编号 部 分 取 值 


编号 样式 。 | 说 明 | 编号 样式 | 说 明 

al ET 

di 大 写 罗 3 数字 
【 例 4-12】 实例 文件 ，ch04\Chap4.12.html) 使 用 自 定义 编号 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title> 使 用 自 定义 编号 </title> 


<style> 
ulf 
list-style: none; /* 去 掉 ul 的 项 目 符号 */ 
1 
1if 
counter-increment: order; /* 定 义 一 个 计数 器 order*/ 
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相关 的 代码 实例 请 参考 Chap4.12.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-15 所 示 。 


-oO 
司 cAUsersWdministrat DP -6 | 本 


图 4-15 使 用 自 定义 编号 


-4.7 ”添加 多 级 编号 


在 上 面 案例 中 ， 只 是 添加 了 一 级 编号 ， 还 可 以 添加 多 级 编号 ， 像 书 的 目录 一 样 ， 可 以 有 多 级 的 编号 。 
下 面 就 使 用 计数 器 来 实现 一 个 简单 的 目录 形式 的 编号 。 
【 例 4-13】 (实例 文件 ，ch04\Chap4.13.html) 添加 多 级 编号 。 
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</head> 

<body> 
<h2>HTML</h2> 
<h3> 第 一 章 内 容 </h3> 
<h3> 第 二 章 内 容 </h3> 
<h2>Css</h2> 
<h3> 第 一 章 内 容 </h3> 
<h3> 第 二 章 内 容 </h3> 
<h2>Javascript</h2> 
<h3> 第 一 章 内 容 </h3> 
<h3> 第 一 章 内 容 </h3> 
</body> 

</html> 
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相关 的 代码 实例 请 参考 Chap4.13.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-16 所 示 。 

我 们 会 发 现 第 二 级 编号 是 连续 的 ， 正 常情 况 下 每 一 章 的 第 一 节 应 该 从 1 开始 ， 上 面 的 效果 不 是 我 们 想 
要 的 ， 但 是 我 们 可 以 通过 counter-reset 属相 来 改变 ， 该 属性 用 于 重 置 计数 器 。 我 们 在 h2 样式 中 添加 
“counter-reset:order2;” 即 可 ， 这 样 就 会 重 置 order2 计数 器 ， 显 示 效果 如 图 4-17 所 示 。 


口 x 
可 cueewanmenspe 国 
文件 月 ” 媚 愉 EE) 二 看 (Y) 心 害 夫 (A) 工具 CD] ” 


A| 


1.HIML 

1.1 第 一 章 内 容 

12 第 二 章 内 容 

2.CSS 

23 第 一 章 内 容 

2.4 第 二 章 内 容 

3.JavaScript 

3.5 第 一 章 内 容 

3.6 第 一 章 内 容 羡 


丽 I0os > 


4-16 ”多 级 计数 器 的 应 用 


oO xX 
于 Chereamniwn D -6| 避 
立 件 朋 ” 妨 二 (FE) 曲面 V) 由 靶 夫 (A) 工具 () ” 


1HIML a 
1.1 第 一 章 内 容 

12 第 二 章 内 容 

2.CSS 

2.1 第 一 章 内 容 

2. 第 二 章 内 容 

3.JavaScript 

3.1 第 一 章 内 容 

32 第 一 章 内 容 问 


丽 ioos ~ 


4-17 重 置 order2 计数 器 后 的 效果 


4.5 CSS 3 新 增 的 伪 类 选择 器 


伪 类 选择 器 主要 用 于 对 选择 器 进行 限制 ， 对 已 有 选择 器 匹配 到 的 元 素 进 行 过 滤 。 下 面 将 详细 介绍 其 中 


的 一 部 分 。 


4.5.1 结构 性 伪 类 选择 器 


EE 
结构 性 伪 类 选择 器 是 指 运用 文档 结构 树 来 实现 元 素 过 滤 ， 简 单 来 说 ， 就 是 利用 文档 结构 之 间 的 相互 关 


系 来 匹配 制定 的 元 素 ， 用 来 减少 文档 内 对 class 属性 以 及 ID 属性 的 定义 ， 从 而 可 以 使 整个 文档 更 加 简练 。 


结构 性 伪 类 选择 器 种 类 如 表 4-2 所 示 。 
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表 4-2 结构 性 伪 类 选择 器 


选 择 器 说 明 
:root 匹配 文档 的 根 元 素 
:nth-child(n) 匹配 其 父 元 素 的 第 n 个 子 元 素 
:nth-last-child(n) 匹配 其 父 元 素 的 倒数 第 n 个 子 元 素 
:nth-of-type(n) 匹配 同 级 元 素 的 第 n 元 素 
:nth-last-of-type(n) 匹配 同 级 元 素 的 倒数 第 n 元素 
:first-child 匹配 其 父 元 素 的 第 一 个 子 元 素 
:last-child 匹配 其 父 元 素 的 最 后 一 个 子 元 素 
:first-of-type 匹配 同 级 元 素 的 第 1 个 元 素 
:only-child 匹配 必须 是 其 父 元 素 的 唯一 子 节点 的 元 素 
:only-of-type 匹配 同 级 元 素 中 的 唯一 一 个 元 素 
:empty 匹配 其 内 部 没有 任何 子 元 素 的 元 素 


下 面 使 用 其 中 的 几 个 选择 器 ， 来 介绍 它们 的 用 法 。 
【 例 4-14】 (实例 文件 ，cho4\Chap4.14.html) 结构 性 伪 类 选择 器 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title> 结 构 性 伪 类 选择 器 </title> 


<style> 
:root{ 
background: yellow; /* 设 置 根 元 素 的 背景 颜色 */ 
1 
p:nth-child(2){ /* 匹 配 p 父 元 素 的 第 2 个子 元 素 */ 
background: red; /* 设 置 背 景色 */ 
color:white; /* 设 置 字体 颜色 */ 
p:nth-last-child(2) { /* 匹 配 p 父 元 素 的 倒数 第 2 个 子 元 素 */ 
background: white; /*# 设 置 背景 色 */ 
</style> 
</head> 
<body> 
<div> 
<p> 结 构 性 伪 类 选择 器 </p> 
<p> 结 构 性 伪 类 选择 器 </p> 
<p> 结 构 性 伪 类 选择 器 </p> 
<p> 结 构 性 伪 类 选择 器 </p> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap4.14.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-18 所 示 。 
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国 cvuserswdminsrtP -上司 
文件 病 各 卓 ”下 看 M 收 基 夫 (A) 工具 中 


4-18 ”结构 性 伪 类 选择 器 


4.5.2 ”UI 元 素 状态 伪 类 选择 器 


UI 元素 状态 伪 类 选择 器 就 是 指定 的 样式 只 有 当 元 素 处 于 某 种 状态 时 ， 样 式 才 起 作用 ， 在 默认 状态 下 不 
起 作用 。 常见 的 有 :hover、 :active、 :focus、 :enable、:disable、 :read-only、 :read-write、 :checked、 :default、 :indeterminate、 


:Selection 等 。 


1. :hover、:active、:focus 


:hover 表示 鼠标 指针 悬浮 时 的 样式 ，:active 表示 按 下 鼠标 左 键 且 不 松 开 时 的 样式 ，:focus 表示 鼠标 指针 获得 
焦点 或 者 进行 输入 时 的 样式 。 它 们 编写 的 顺序 不 要 写 反 ,否则 不 会 显示 效果 , 正确 顺序 为 :hover、:focus、:active。 


【 例 4-15】 (实例 文件 ，ch0o4\Chap4.15.html) :hover、:active、:focus 实例 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-9"> 
<title>Title</title> 
<style> 
input [type="text"] :hover { /+* 和 鼠标 指针 经 过 (是 停 时 )*/ 
background-color: pink; ” /# 设 置 背景 颜色 +/ 
是 
input [tyYpe="text"] :focus {  /* 和 鼠标 指针 获得 焦点 (点 击 ) 或 进行 文字 输入 时 */ 
background-color: yellow; /* 设 置 背景 颜色 +/ 
input [type="text"] :active { /+* 按 下 鼠标 左 键 且 不 松 开 */ 
background-color: red; /# 设 置 背景 颜色 */ 
) 
</style> 
</head> 
<body> 
手机 号 : <input type="text" id="txt"> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap4.15.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-19 所 示 。 
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FN 
0 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 
丽人 状态 下 Er 
号 :[ Is: 
鼠标 按 下 不 松 开 鼠标 点 击 时 
s: Emi =ts: 


图 4-19 :hover、:active、:focus 实例 


2. :checked、:selection 


:checked 是 用 来 指定 当 表单 中 的 radio 单 选 按钮 、checkbox 复 选 框 处 于 选中 状态 时 的 样式 。:selection 伪 
类 选择 器 用 来 指定 当 元 素 处 于 选中 状态 时 的 样式 。 
【 例 4-16】 实例 文件 ，ch04\Chap4.16.html》:checked、:selection 实例 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
input [type="checkbox"] :checked{ /* 选 中 含有 type="checkbox" 属 性 类 别 的 input*/ 
outline: 2px solid red; /* 绘 制 于 元 素 周围 的 线 */ 
} 
input [type="text"]::selection{ /* 选 中 含有 type="text" 属 性 类 别 的 input*/ 


color: red; /* 设 置 选中 文本 的 字体 颜色 */ 
background-color: yellow; /* 设 置 选 中 文本 的 背景 颜色 */ 
} 
</style> 
</head> 
<body> 
<ui> 


<1i>HTML<input type="checkbox"></1i> 
<li>Ccss<input type="checkbox"></1i> 
<li>Javascript<input type="checkbox"></1i> 
<li><input type="text"” value=" 测 试 表单 "></1i> 


</ui> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap4.16.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-20 所 示 。 选 中 元 素 时 ， 
页 面 效果 如 图 4-21 所 示 。 
bd 口 x bs 口 x 
上 cNusersvdnminksuat P -6 | 三 EU 国 cvusersvdminis P " 理 cu 
文人 罗 生 日志 看 M 收 大 灾 A， 工 RD 种” 文件 (六 入 (E) 查看 M。 收 意 夫 (A， 工具 帮 
HIMLOD HIML 回 
CSS 口 css 回 
JavaScript 口 JavaScnipt 回 
测试 到 单 
下 100% > 态 100% 
图 4-20 ”页面 加 载 完成 效果 图 4-21 选中 效果 
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4.5.3 目标 〈(:target) 伪 类 选择 器 


ph 

目标 伪 类 选择 器 :target 是 CSS 3 新 增 伪 类 选择 器 之 一 ， 用 来 匹配 文档 中 被 相关 URL 指向 的 目标 元 素 。” 
目标 伪 类 选择 器 是 动态 选择 器 ， 只 有 存在 URL 指向 该 匹配 元 素 时 ， 样 式 效果 才 会 生效 。 

具体 来 说 ，URL 中 的 标志 通常 会 包含 一 个 #， 后 面 带 有 一 个 标志 符 名称 ， 如 #box,:target 就 是 匹配 ID 为 
"box" 的 目标 元 素 。 

如 一 个 页 面 中 有 一 个 <a> 标 签 ， 它 的 href 是 <a href="#box"> 内 容 </a> ， 同 一 个 页 面 中 也 会 有 以 box 为 
id 的 元 素 ，<div id="box "> 标题 </div>。 

那么 <a> 标 签 的 href 属性 会 链接 到 #box 元 素 ， 也 就 是 box:target 选择 符 所 选 的 目标 元 素 ， 当 a 链接 到 这 
个 元 素 的 时 候 ， 它 所 指定 的 样式 就 是 目标 元 素 的 样式 。 

【 例 4-17】〗】 (实例 文件 ，cho4\Chap4.17.html) :target 伪 类 选择 器 实例 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style type="text/css"> 
#box:target { 
color: #a3c70c; /* 设 置 字体 颜色 */ 
( 
</style> 
</head> 
<body> 
<h2 id="box">HTML 基础 知识 </h2> 
<a href="#box"> 第 一 章 的 题目 是 什么 </a> 


</body> 
</html> 
相关 的 代码 实例 请 参考 Chap4.17.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-22 所 示 。 当 点 击 “ 第 一 
章 的 题目 是 什么 ”链接 时 ， 页 面 变 成 如 图 4-23 所 示 的 效果 。 
i Fo Pr © a ed 
文 作 (中 。 禹 坦 E) 查看 V) 履 吕 交工 具 m 三 文 #D。 过 各 E) 查 看 收 让 交工 RD 玫 
HTML 基 础 知识 HTML 基 础 知识 
100% ~ R100% ~ 
图 4-22 页 面 加 载 完 成 时 图 4-23 目标 页 面 效 果 


4.5.4 ”否定 〈:not) 伪 类 选择 器 


否定 伪 类 选择 器 用 于 过 滤 掉 含有 某 个 选择 器 的 元 素 ， 如 pnot(fbox). 就 是 过 滤 掉 id 为 #box 的 p 元 素 。 
【 例 4-18】〗】 (实例 文件 ， cho4\Chap4.18.html) :not 伪 类 选择 器 实例 。 

<!DocTYPE html> 

<html> 


<head> 
<meta charset="UTF-8"> 
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<title>Title</title> 
<style> 
p:not (#box) { 
color:#£00; 
} 
</style> 
</head> 
<body> 
<div> 
<p> 和 否定 伪 类 选择 符 :not () </p> 
<p id="box"> 和 否定 伪 类 选择 符 :not ()</p> 
<p class="box"> 和 否定 伪 类 选择 符 :not () </p> 


</div> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap4.18.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-24 所 示 。 


Do Xx 
间 cserswaninisvat PD - 0| 居 Tie 
KHD PA) HEV MN IAD WO 


否定 协 夫 适 择 符 -aoe0 


到 ioox ~ 


图 4-24 否定 伪 类 选择 器 


4.6 ”属性 选择 器 


属性 选择 器 可 以 为 拥有 指定 属性 的 HTML 元素 设置 样式 。 
属性 选择 器 早 在 CSS 2 中 就 被 引入 了 ， 其 主要 作用 就 是 对 带 有 指定 属性 的 HTML 元 素 设置 样式 。 使 
用 CSS 3 属性 选择 器 ， 用 户 可 以 只 指定 元 素 的 某 个 属性 ， 或 者 用 户 还 可 以 同时 指定 元 素 的 某 个 属性 和 其 


对 应 的 属性 值 。 
属性 选择 器 的 种 类 如 表 4-3 所 示 。 
表 4-3 属性 选择 器 的 种 类 
属性 选择 器 说 明 
[attribute] 选取 带 有 指定 属性 的 元 素 
[attribute=value] 选取 带 有 指定 属性 和 值 的 元 素 
[attribute 一 =value] 选取 属性 值 中 包含 指定 词汇 的 元 素 
[attribute|=value] 选取 带 有 以 指定 值 开 头 的 属性 值 的 元 素 ， 该 值 必须 是 整个 单词 
[attribute^=value] 匹配 属性 值 以 指定 值 开头 的 每 个 元 素 
[attributeS=value] 匹配 属性 值 以 指定 值 结 尾 的 每 个 元 素 
[attribute*=value] 匹配 属性 值 中 包含 指定 值 的 每 个 元 素 
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【 例 4-19】 (实例 文件 ，cho4\Chap4.19.html) 属性 选择 器 应 用 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title> 属 性 选择 器 </title> 
<style> 
[class^=d]{ /* 匹 配 类 属性 值 以 a 开头 的 每 个 元 素 */ 
background:red; /# 设 置 背景 颜色 */ 
于 
[class$=b] { /* 匹 配 类 属性 值 以 b 结尾 的 每 个 元 素 */ 
font-size: 30px; /* 设 置 字体 的 大 小 */ 
</style> 
</head> 
<body> 


<p class="da"> 属 性 选择 器 </p> 
<p class="db"> 属 性 选择 器 </p> 
<p class="ca"> 属 性 选择 器 </p> 
<p class="cb"> 属 性 选择 器 </p> 
</body> 
</html> 
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相关 的 代码 实例 请 参考 Chap4.19.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-25 所 示 。 


二 凋 吕 


辣 cnueeawdminiaar 亡 - © EB em 
XP MEE) SEV dAN IRT WO 


looN ~ 


图 4-25 属性 选择 器 应 用 


4.7 ”实践 案例 一 一 制作 404 页 面 


404 页 面 主要 作用 是 告诉 我 们 ， 页 面 找 不 到 ， 或 者 网 络 连接 失败 等 ， 这 类 问题 在 
遇 到 。 本 案例 就 来 制作 一 个 404 页 面 。 


【 例 4-20】 实例 文件 ，ch04\Chap4.19.html) 设计 404 页 面 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 计 404 页 面 </title> 
<style> 
了 
margin: 07 
padding: 07 


时 浏览 网 页 时 经 常 
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-boxf 
font-family: "微软 雅 黑 "; /* 设 置 字体 类 型 #/ 
font-size: 80px; /* 设 置 字体 大 小 */ 
color: #flebe57 /* 设 置 字体 颜色 */ 
/* 设 置 文字 阴影 */ 
text-shadow: 0 8px 9px #c4b59d, Opx -2px lpx rgba(255, 46, 108, 0.73); 
font-weight: bold; /*# 设 置 字体 加 粗 */ 
text-align: center; /+* 设 置 水 平 居 中 */ 
padding: 20px 100px; /* 设 置 内 边 距 */ 
/# 设 置 背景 色 渐 变 */ 
background: linear-gradient (to bottom, #0dc418 0%, #5dc4a3 100%); 
hi{ 
border-bottom: lpx solid #fff; /*# 设 置 底 边框 +/ 
下 
h2{ 
font-size: 20px; 
input{ 
background-color: #20a7ff; 
border-radius: 10px; /* 设 置 图 角 边框 *+/ 
border: 0; 
height: 30px; /* 设 置 高 度 */ 
width: 80px; /* 设 置 宽度 */ 
padding: Spx; 
color: white; 
和 
</style> 
</head> 
<body> 
<div class="box"> 
<h1>404</h1> 


<h2> 抱 娄 . . .你 找 的 页 面 已 经 不 存在 了 ! </h2> 
<input type="button" valu: 回首 页 "> 
<input type="button"” value=" 联 系 管理 "> 

</div> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap4.20.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 4-26 所 示 。 


ELD] 5 
Eo 


画 EweerwdnwsaenE D ~ © 


图 4-26 404 页 面 效果 
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4.8 就业 面试 技巧 与 解析 


4.8.1 面试 技巧 与 解析 (一) 


面试 官 :在 CSS 中 ,行内 元 素 和 块 级 元 素 的 具体 区 别 是 什么 ? 行内 元 素 的 padding 和 margin 可 设置 吗 ? 

应 聘 者 : 块 级 元 素 (block) 总 是 独占 一 行 ， 表 现 为 另 起 一 行 开始 ， 而 且 其 后 的 元 素 也 必须 另 起 一 行 显 
示 ; 宽度 (width)、 高 度 (height)、 内 边 距 (padding) 和 外 边 距 (margin) 都 可 控制 。 

行内 元 素 和 相 邻 的 行内 元 素 在 同一 行 显示 ; 宽度 (width)、 高 度 (height)、 内 边 距 的 padding-top/ 
padding-bottom 和 外 边 距 的 margin-top/margin-bottom 都 不 可 改变 ， 但 是 内 边 距 的 padding-left/ padding-right 和 
外 边 距 的 margin-left/margin-right 等 属性 可 以 设置 。 

浏览 器 还 有 默认 的 行内 元 素 ， 它 们 拥有 内 在 尺寸 ， 可 设置 高 宽 ， 但 不 会 自动 换行 ， 如 <input>、<img>、 
<button> 等 元 素 。 


4.8.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 选择 器 用 的 好 坏 ， 决 定 对 页 面 控制 的 好 坏 ， 请 问 你 平时 经 常 使 用 哪些 选择 器 。 

应 聘 者 : 经 常 使 用 的 CSS 选择 器 分 别 如 下 : 

(1) 标签 选择 器 ， 又 称 为 标记 选择 器 ， 在 W3C 标准 中 ， 又 称 为 类 型 选择 器 (type selector)。 

(2) 类 选择 器 ， 人 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 。 可 以 单独 使 用 ， 也 可 以 与 其 他 元 素 结 
合 使 用 。 

(3) ID 选择 器 : 允许 以 一 种 独立 于 文档 元 素 的 方式 来 指定 样式 ， 在 某 些 方面 ，ID 选择 器 类 似 于 类 选择 
器 ， 不 过 也 有 一 些 重要 差别 。 

(4) 属性 选择 器 : 可 以 根据 元 素 的 属性 及 属性 值 来 选择 元 素 。 
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第 5 章 
使 用 并 美化 网 页 文本 


E> 学 习 指引 


常见 的 网 站 是 使 用 文字 或 者 图 片 来 展示 内 容 的 ， 其 中 文字 是 传递 信息 的 主要 手段 。 本 章 将 使 用 CSS 技 
术 来 美化 网 页 文本 。 


过 重点 导读 


。 掌 握 设置 网 页 文本 字体 的 方法 。 

。 掌 握 设置 网 页 文本 缩 进 和 间隔 的 方法 。 

。 掌 握 设置 网 页 文本 对 齐 方式 的 方法 。 

。 掌 握 CSS 3 新 增 的 服务 器 字体 的 使 用 方法 。 


5.1 设置 网 页 文本 字体 


在 HIML 5 中 ， 可 以 使 用 CSS 3 字体 属性 来 定义 文字 的 大 小 、 字 体 、 粗 细 等 表现 。 常 见 的 字体 属性 包 
括 字体 、 字 号 、 字 体 颜色 、 字 体 风 格 等 。 


5.1.1 设置 字体 粗细 属性 


font-weight 属性 用 于 定义 字体 的 粗细 程度 。font-weight 属性 有 13 个 有 效 值 ， 分 别 是 bold、bolder、 
lighter、normal、100 一 900。 如 果 没 有 设置 该 属性 ， 则 使 用 其 默认 值 normal。 属 性 值 设置 为 100~900， 值 
越 大 ， 加 粗 的 程度 就 越 大 。 

font-weight 属性 值 的 具体 含义 如 表 5-1 所 示 。 


表 5-1 font-weight 的 属性 值 
属性 值 说 明 
bold 定义 粗 体 字体 
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续 表 


属 性 值 说 明 
定义 更 粗 的 字体 ， 相 对 值 
定义 更 细 的 字体 ， 相 对 值 
默认 值 ， 标 准 字体 


Bolder 
lighter 
normal 

【 例 5-1】 实例 文件 ，ch05\Chap5.1.html) 设置 字体 粗细 。 


<!DOCTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<title> 设 置 字体 的 粗细 </title> 

<style> 

p:first-of-type{ /*+ 获 取 第 一 个 P 元 素 */ 
font-weight: bold; /* 设 置 字体 加 粗 */ 


} 
p:nth-of-type (2) { /* 获 取 第 二 个 吕 元 素 */ 
font-weight: bolder; /* 设 置 字体 加 粗 */ 
} 
p:nth-of-type (3){ /* 获 取 第 三 个 了 元素 */ 
font-weight:lighter; /* 设 置 细 字 体 */ 
} 
</style> 
</head> 
<body> 
<p> 做 优雅 的 自己 ,放手 不 属于 自己 的 事物 </p> 
<p> 做 优雅 的 自己 ,放手 不 属于 自己 的 事物 </p> 
<p> 做 优雅 的 自己 ,放手 不 属于 自己 的 事物 </p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap5.1.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-1 所 示 。 


- OO x 
半 CUsersAdministrat ”0C | 车 设 村 字体 的 
文件 (月 弦 编 (E) 查看 (V) 收藏 夫 (A) 工具] 。 帮助 (H) 


做 优雅 的 自己 ， 放 手 不 属于 自己 的 事物 
做 优雅 的 自己 ， 放 手 不 属于 自己 的 事物 
做 优雅 的 自己 ， 放 和 手 不 属于 自己 的 事物 


或 100% > 


图 5-1 设置 字体 粗细 属性 


5.1.2 设置 字体 风格 属性 - 


font-style 属性 用 于 设置 字体 的 风格 ， 即 字体 的 显示 样式 。font-style 属性 值 有 4 个 ， 具 体 含义 如 表 5-2 
所 示 。 
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= 
Ne 


表 5-2 font-style 的 属性 值 


属 性 值 说 明 
normal 默认 值 
oblique 倾斜 的 字体 样式 


斜体 的 字体 样式 
规定 应 该 从 父 元 素 继承 字体 样式 


【 例 5-2】 实例 文件 ，ch05\Chap5.2.html) 设置 字体 风格 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 字 体 风格 属性 </title> 
<style> 
.pl{font-style:normal;} /* 设 置 正常 的 字体 风格 */ 
.p2{font-style:oblique;} ”/* 设 置 倾斜 的 字体 风格 */ 
.p3{font-style:italic;} /* 设 置 斜 体 的 字体 风格 */ 
</style> 
</head> 
<body> 
<p class="pl"> 喜 欢 一 个 人 ,是 一 种 心情 </P> 
<p class="p2"> 喜 欢 一 个 人 ,是 一 种 心情 </p> 
<p class="p3"> 喜 欢 一 个 人 ,是 一 种 心情 </p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap5.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-2 所 示 。 


- WEN x 
刁 CAUsersAdministrat 站 ”C0 大 设置 字体 风格 蛋 
OO 


重 性 一 个 人 ， 硅 一 天 心算 


我 100% > 


图 5-2 设置 字体 风格 属性 


5.1.3 ”设置 字体 大 小 属性 
font-size 属性 用 于 设置 字体 的 大 小 。 可 以 给 font-size 属性 指定 具体 的 像素 值 ， 如 “font-size: 20px”， 
还 可 以 通过 一 些 参数 来 设置 字体 的 大 小 ， 这 些 参数 和 说 明 如 表 5-3 所 示 。 


表 5-3 font-size 的 属性 值 
参 数 | 说 明 
larger | 相对 于 父 元 素 中 字体 的 尺寸 进行 相对 增 大 ， 使 用 em 单位 计算 
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续 表 
参 数 说 明 
smaller 相对 于 父 元 素 中 字体 的 尺寸 进行 相对 减 小 ， 使 用 em 单位 计算 
length 百分比 或 者 浮 点 数 和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 ， 百 分 比 取 值 是 基于 其 父 对 象 中 字体 的 尺寸 


【 例 5-3】 (实例 文件 ，chos\Chap5.3html) 设置 字体 大 小 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 设 置 字体 大 小 </title> 


<style> 
.pl{font-size:smaller;} /* 设 置 字体 大 小 的 smaller 属性 */ 
-p2{font-size:larger;} /* 设 置 字体 大 小 的 larger 属性 */ 
-Pp3{font-size:30px;} /* 设 置 字体 的 大 小 为 30 像素 */ 
</style> 
</head> 
<body> 


<p class="p1l"> 勤 奋 永 远 是 成 功 的 标 配 </P> 
<p class="p2"> 勤 奋 永 远 是 成 功 的 标 配 </P> 
<p class="p3"> 勤 奋 永 远 是 成 功 的 标 配 </P> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap5.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-3 所 示 。 


- oO x 
国 cvusersydminisra 人 -0 | 大 各 生体 大 1 

文件 站。 器 入 (E) 下 看 (V) 收藏 关 A) 工具 (1 帮 动 (H) 

起 凋 未 这 是 成 功 的 杯 色 ~ 


勤奋 永远 是 成 功 的 标 配 


勤奋 永远 是 成 功 的 标 配 ”~ 


号 100% > 


图 5-3 设置 字体 大 小 属性 


5.1.4 设置 字体 类 型 属性 


font-family 属性 用 于 指定 文字 的 字体 类 型 ， 如 隶书 、 宋 体 、 黑 体 、 楷 体 等 。 
【 例 5-4】〔 实 例文 件 ，ch05\Chap5.4.html) 设置 字体 类 型 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title> 设 置 字体 类 型 属性 </title> 


<style> 
-Pl{font-family: 微软 雅 黑 ;} /* 设 置 字体 类 型 为 “微软 雅 黑 ”*/ 
-P21{font-family: 华 文 彩云 ;} /* 设 置 字体 类 型 为 “华文 彩云 ”*/ 
-Pp3{font-family: 宋 体 ;} /* 设 置 字 体 类 型 为 “宋体 ”*/ 
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相关 的 代码 实例 请 参考 Chap5.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-4 所 示 。 


.1.5 设置 文本 行 高 属性 


line-height 属性 用 于 设置 行 间距 ， 即 行 高 。 它 的 取 值 可 以 是 百分比 数值 、 浮 点 数 和 单位 标识 符 组 成 的 长 
度 值 ， 允 许 为 负 值 ， 百 分 比 取 值 是 基于 字体 的 高 度 尺寸 。 
【 例 5-5】 “实例 文件 ，ch05\Chap5.5.html) 设置 文本 的 行 高 。 
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</body> 
</html> 


相关 的 代码 实例 请 参考 Chap5.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-5 所 示 。 


三 折 ， 侈 

cserpdminiswat 记 - | 碍 到 

文件 月 ” 钴 吉 E) 至 看 V) 收 友 夫 (A) 工具 大 
fs 


有 100% ~ 


5-5 设置 文本 行 高 属性 


5.1.6 设置 字体 复合 属性 


在 网 页 设计 中 ， 对 字体 需要 设置 多 种 属性 值 时 ， 多 个 属性 值 分 别 书写 相对 比较 麻烦 ， 可 以 使 用 font 属 
性 解决 这 一 问题 。font 属性 中 的 属性 值 的 排列 顺序 是 font-style、font-variant、font-weight、font-size 和 
font-family， 各 属性 的 属性 值 之 间 使 用 空格 隔 开 。Family 属性 要 定义 多 个 属性 值 时 ,需要 用 逗号 把 每 个 属性 
值 隔 开 。 

其 中 font-style、font-variant 和 font-weight 这 三 个 属性 的 顺序 可 以 自由 调换 ， 甚 至 可 以 不 写 ，font-size 
和 font-family 属性 必须 固定 顺序 出 现 ， 而 且 必 须 都 出 现在 font 属性 中 。 

【 例 5-6】 实例 文件 ，ch05\Chap5.6.html) 设置 字体 的 复合 属性 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 字体 复合 属性 </title> 
<style> 
Pt 
font:normal bold 20px 宋体 ; /*# 设 置 字体 复合 属性 */ 
} 
</style> 
</head> 
<body> 
<p> 努 力 了 ,可 能 会 失败 ; 但 是 不 努力 , 一 定 会 失败 。</p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap5.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-6 所 示 。 


- oO x 
国 cwenwninsva Pp- 医生 
文 站” 蝙 线 (6) 豆 看 WV) 收藏 夫 A) 工具 雪 ” 


努力 了 ， 可 能 会 失败 : 但 是 不 努 
力 ， 一 定 会 失败 。 


00% > 


图 5-6 设置 字体 复合 属性 
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5.1.7 ”定义 网 页 文本 颜色 属性 
对 于 网 页 中 的 文本 颜色 ， 使 用 color 属性 来 设置 ，color 属性 的 取 值 如 表 5-4 所 示 。 
表 5-4 color 的 属性 值 


属 性 值 说 明 
color name 规定 颜色 值 为 颜色 名 称 的 颜色 (如 blue、red、yellow) 
hex_number 规定 颜色 值 为 十 六 进 制 值 的 颜色 (如 #000000) 
rgb_number 规定 颜色 值 为 rgb 代码 的 颜色 (如 rgb(255,255,255)) 
inherit 规定 从 父 元 素 继承 颜色 


【 例 5-7】 (实例 文件 ，chos\Chap5.7.html) 设置 网 页 文本 颜色 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 定 义 网 页 文本 颜色 </title> 
<style> 
-pl{color: red;} /* 设 置 字体 的 颜色 */ 
-p2{color: #a3c70c;} 
-p3{color: rgb(139,125,123)} 
</style> 
</head> 
<body> 
<p class="p1"> 把 握 了 生活 ,其 实 也 就 把 握 住 了 幸福 。</p> 
<p class="p2"> 把 握 了 生活 ,其 实 也 就 把 握 住 了 幸福 。</p> 
<p class="p3"> 把 握 了 生活 ,其 实 也 就 把 握 住 了 幸福 。</p> 


</body> 
</html> 
相关 的 代码 实例 请 参考 Chap5.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-7 所 示 。 


- 0O x 
司 CUsersAdministrat PD- 6 车 志 
文件 (月 篇 纺 (E)】 查看 V) 收藏 闪 (A) 工具 MT 和” 


把 担 了 生活 ， 其 实 也 就 把 担 住 了 幸福 。 。 信 | 
把 握 了 生活 ， 其 实 也 就 把 握 住 了 幸福 。 


其 实 也 就 把 提 住 了 幸福 | 


夸 100% ~ 


图 5-7 定义 网 页 文本 颜色 属性 


5.2 设置 网 页 文本 的 缩 进 和 间距 


网 页 基本 上 是 由 文本 和 图 片 构成 ， 文 本 的 样式 设置 及 风格 影响 着 整个 网 页 的 美观 程度 ， 本 节 主 要 介绍 
HTML 中 文本 的 缩 进 和 间距 的 设置 。 
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5.2.1 设置 首 行 缩 进 属性 


text-indent〈 首 行 缩 进 ) 属性 用 于 设置 文本 的 首 行 缩 进 ， 它 的 取 值 可 以 是 百分比 数值 、 浮 点 数 和 单位 标 
识 符 组 成 的 长 度 值 ， 允 许 为 负 值 。 
【 例 5-8】”〔 实 例文 件 ，ch05\Chap5.8.html) 设置 首 行 缩 进 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 设 置 首 行 缩 进 </title> 


<style> 
*{margin: 0;padding: 0;} /* 设 置 页 面 中 所 有 控件 的 内 、 外 边 距 为 0+/ 
pttext-indent:2emz /* 设 置 首 行 缩 进 2 字符 */ 
</style> 
</head> 
<body> 


<p> 百 折 不 回 的 精神 虽然 可 佩 , 但 如 果 这 里 虽然 望 得 见 目 标 , 而 这 前 面 却 是 一 片 陡峭 的 山 壁 , 没有 可 以 榴 援 的 路 径 时 ,我 们 也 只 好 
换 一 个 方向 ,绕道 而 行 。</p> 

<p> 为 了 达到 目标 ,暂时 走 一 走 与 理想 相 背 驰 的 路 , 有 时 正 是 智慧 的 表现 。 事 实 上 , 人 生 途 中 是 没有 几 条 便捷 的 直达 路 径 可 走 的 。 
</p> 

<p> 我 们 时 常 必须 把 目标 放 在 背后 ,而 耐心 地 去 做 披 荆 斩 斑 、 铺 路 修 桥 的 工作 ,我 们 时 常 必需 尝试 很 多 条 看 起 来 非常 史 暗 无 望 的 
道路 之 后 , 才 发 现 距离 目标 近 了 一 点 。</P> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap5.8.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-8 所 示 。 


- OD x 
司 Geerc Wdminicrat P ~ 上 | BR “加 

芭 件 由 病 吉 日 本 看 V】 收藏 天 A】 工具) 帮 0H| 

百 折 不 回 的 精神 虽然 可 佩 ， 息 如 果 这 里 虽然 望 得 见 目 标 ， 而 这 前 面 


是 具 陆 全 的 山 各 ， 没有 可 以 击 援 的 路 径 时 ， 我 们 也 只 好 换 一 个 方 
癌 ， 绕 道 而 行 


为 了 说 呈 暂时 走 一 走 与 理想 相 表 外 的 路 ， 有 时 正 是 智慧 的 表 
遇 。 事 实 上 ， 人 生 迹 中 是 没有 几 杂 便 二 的 直达 路 答 可 走 的 。 


在 背后 ， 而 而 心地 去 做 扯 莉 折 畦 、 鱼 路 修 桥 
很 多 条 看 起 来 非常 时 临 无 望 的 道路 之 后 ， 才 


大 100% ~ 


图 5-8 设置 首 行 缩 进 属性 


5.2.2 ”设置 字符 间距 属性 


回 
设置 letter-spacing (字符 间距 ) 属性 ， 对 于 汉语 而 言 ， 是 字 与 字 之 间 的 间距 ， 对 于 英文 而 言 ， 是 字母 与 
字母 之 间 的 间距 。 取 值 可 以 是 正 值 或 者 负 值 。 
【 例 5-9】〔 实 例文 件 ，ch05\Chap5.9.html) 设置 字符 间距 。 
<!DOCTYPE html> 
<html> 
<head> 


‘<meta charset="UTF-8"> 
<title> 设 置 字符 间距 </title> 
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话 在 昨天 的 人 过 车 
大 生生 人 匠 区 


here are only three days in life Those who 
ive tomorrow wait:Those who live today are 
he surest. 


5.2.3 ”设置 单词 间距 属性 


word-spacing 单词 间距 ) 属性 用 于 指定 某 个 区 域 或 者 段落 中 单词 与 单词 之 间 的 间隔 。 它 的 取 值 可 以 是 
正 值 或 负 值 。 
【 例 5-10】〔 实 例文 件 ，ch05\Chap5.10.html) 设置 单词 间距 。 
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相关 的 代码 实例 请 参考 Chap5.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-10 所 示 。 


一 口 x 
司 cserWdministat PP -6 | 屋 朗 本 单 同 问 后 
文件 ( ”久生 (| 二 看 V) 收 训 夫 入。 工具 (T) 帮助 H) 


[rhere ae only three days in life. 
[rhose who live tomorow wait: 


[hose who lie today are the surest 


殷 100% ~ 


5-10 ”设置 单词 间距 属性 


5.3 ”设置 网 页 文本 的 对 齐 方式 
网 页 文本 的 对 齐 方式 有 两 种 ， 分 别 是 水 平 对 齐 方式 和 垂直 对 齐 方式 。 


5.3.1 控制 文本 的 水 平 对 齐 方式 
text-align 属性 用 于 设置 文本 的 对 齐 方式 ， 它 的 取 值 如 表 5-5 所 示 。 


表 5-5 text-align 的 属性 值 


属 性 值 说 明 

center 文本 居中 对 齐 

left 文本 向 左边 对 齐 

right 文本 向 右边 对 齐 
justify 文本 两 端 对 齐 

inherit 继承 父 元 素 的 对 齐 方式 


【 例 5-11】 实例 文件 ，ch05\Chap5.11.html) 控制 文本 水 平 对 齐 方式 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 水 平 对 齐 方式 </title> 


<style> 
pfwidth: 500px;border: lpx solid red;} ” /* 设 置 所 有 <p> 标 签 的 宽度 和 边框 */ 
-pl{text-align: left;} /* 设 置 .pl 的 文本 水 平 居 左 对 齐 */ 
.p2{text-align: center;} /* 设 置 .p2 的 文本 水 平 居 中 对 齐 */ 
-Pp3{text-align: right;} /* 设 置 .p3 的 文本 水 平 居 右 对 齐 */ 
.pa4{text-align:justify;} /* 设 置 .p4 的 文本 两 端 对 齐 */ 
.pS{text-align:left;} 

</style> 
</head> 
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<body> 

<p class="p1"> 留 白 ,是 中 国画 的 一 种 布局 与 智慧 。</p> 

<p class="p2"> 留 白 , 是 中 国画 的 一 种 布局 与 智慧 。</p> 

<p class="p3"> 留 白 ,是 中 国画 的 一 种 布局 与 智慧 。</p> 

<p class="p4"> 留 白 ,是 中 国画 的 一 种 布局 与 智慧 。 留 白 , 是 中 国画 的 一 种 布局 与 智慧 。 留 白 , 是 中 国画 的 一 种 布局 与 智慧 。 
(justify 效果 ) </p> 

<p class="p5"> 留 白 ,是 中 国画 的 一 种 布局 与 智慧 。 留 白 ,是 中 国画 的 一 种 布局 与 智慧 。 留 白 ,是 中 国画 的 一 种 布局 与 智慧。 


(left 效果 ) </p> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap5.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-11 所 示 。 
= 口 x 
司 GWserswAdmnistrat 只 ”上 | 情 水 Pi 方式 x | 


六 HH( 有 关于 E 二 看 V】 改装。 工具 TT) 大 各 0H] 

轿 百 ， 是 中 国 可 琢 一 大 布局 写 杰 理 。 

留 百 ， 是 中 国 丁 的 一 种 市 局 与 衬 题 。 
留 百 ， 是 中 国 男 的 一 种 布局 与 于 莫 。] 


百 ， 是 中 国画 极 一 种 布局 写 否 题 。 留 百 ， 是 中国 回 的 一 种 布局 与 析 
。 留 白 ,， 是 中 国画 的 一 种 市 局 与 和 至 。 (jusufy 效 果 ) 


百 ， i 田 白 ， 二 
。 留 日 ， 是 中 国画 的 一 种 市 局 与 智慧 。 (le 区 


R100% ~ 


5-11 控制 文本 的 水 平 对 齐 方式 


8 5.3.2 控制 文本 的 垂直 对 齐 方式 


vertical-align 属性 用 于 定义 垂直 对 齐 方式 , 该 属性 定义 行内 元 素 的 基线 相对 于 该 元 素 所 在 行 的 基线 的 垂 
直 对 齐 ， 人 允许 指定 负 长 度 值 和 百分比 值 。 这 个 属性 一 般 设置 单元 格 框 中 的 单元 格 内 容 的 对 齐 方式 ， 它 的 取 


值 如 表 5-6 所 示 。 
表 5-6 _ vertical-align 的 属性 值 

属 性 值 说 明 
baseline 默认 。 元 素 放置 在 父 元 素 的 基线 上 

sub 垂直 对 齐 文本 的 下 标 

super 垂直 对 齐 文本 的 上 标 

top 把 元 素 的 顶端 与 行 中 最 高 元 素 的 顶端 对 齐 
text-top 把 元 素 的 项 端 与 父 元 素 字体 的 顶端 对 齐 
middle 把 此 元 素 放 置 在 父 元 素 的 中 部 

bottom 把 元 素 的 项 端 与 行 中 最 低 的 元 素 的 顶端 对 齐 
text-bottom 把 元 素 的 底 端 与 父 元 素 字体 的 底 端 对 齐 

% 使 用 "line-height" 属 性 的 百分比 值 来 排列 此 元 素 。 人 允许 使 用 负 值 
inherit 继承 父 元 素 的 vertical-align 属性 
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【 例 5-12】 实例 文件 ，ch05\Chap5.12.html)》 控 制 文本 的 垂直 对 齐 方 式 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 垂 直 对 齐 方式 </title> 
<style> 
div{ 
width: 400px; 
height: 80px; 
border: lpx solid red; 
display: table; 
了 


Wel 
text-align: center; 


display: table-cell; 
} 
.pl{vertical-align: top;} 
-p2{vertical-align: middle;} 
-p3{vertical-align: bottom;} 
</style> 
</head> 
<body> 


/* 设 置 边框 */ 


/* 设 置 div 为 块 级 表格 来 显示 */ 


/* 设 置 文本 水 平 居中 */ 


/* 使 子 元 素 成 为 表格 单元 格 */ 


/* 设 置 -pl 的 文本 与 父 元 素 的 顶端 对 齐 */ 
/* 设 置 .p2 的 文本 垂直 居中 对 齐 */ 
/* 设 置 .p3 的 文本 与 父 元 素 的 底 端 对 齐 */ 


<div><p class="pl"> 做 任何 事情 步骤 1 都 要 树立 一 个 目标 。</p></div> 
<div><p class="p2"> 做 任何 事情 步骤 1 都 要 树立 一 个 目标 。</p></div> 
<div><p class="p3"> 做 任何 事情 步骤 1 都 要 树立 一 个 目标 。</p></div> 


</body> 
</html> 


相关 的 代码 实例 请 参考 Chap5.12.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-12 所 示 。 


站 GWUsersydminstrat PD ~ © | B 要 下 叶 开 方 式 
文 作品 ”半生 昌吉 看 收藏 六。 工具 0 帮助 CH) 


9 x 


优 任 何事 情 弟 一 目 避 要 本 立 


个 巨 和 


做 任何 事情 第 一 步 部 要 树立 一 个 目标 。 


做 任何 事情 第 一 步 痢 要 树立 一 个 目标 。 


由 100% > 


图 5-12 控制 文本 的 垂直 对 齐 方式 


5.4 CSS 3 新 增 的 服务 器 字体 


在 CSS 之 前 的 版 本 ， 大 部 分 网 站 的 网 页 中 设置 的 都 是 普通 的 字体 ， 有 的 甚至 都 不 设置 字体 ， 
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要 想 在 不 同 的 客户 端 去 显示 正常 的 字体 效果 , 首先 客户 端 要 有 这 种 字体 , 否则 设置 的 字体 效果 将 不 会 显 


示 。 


CSS 3 新 增 了 服务 器 字体 ， 很 好 地 解决 了 这 个 问题 。 若 客户 端 没有 要 设置 的 字体 ， 将 会 自动 下 载 所 


设置 的 字体 。 


5.4.1 ”使 用 服务 器 字体 


使 用 服务 器 字体 ， 首 先 要 先 定义 服务 器 字体 ， 定 义 服务 器 字体 使 用 @font-face 来 定义 ， 代 码 如 下 : 


efont-face 
{ 
font-family:name; /# 设 置 服务 器 字体 的 名 称 */ 
src:url (url) format (font-format); /* 设 置 字体 路 径 和 字体 格式 */ 
} 


上 面 的 语法 中 font-family 属性 用 于 指定 服务 器 字体 的 名 称 ， 这 个 名 称 可 以 随意 定义 ， 它 用 于 在 需要 的 


位 置 去 引用 。srec 属性 中 通过 url 来 指定 字体 的 路 径 ，format 用 于 指定 字体 的 格式 ， 到 目前 为 止 ， 服 务 器 字 
体 还 只 支持 TrueType 格式 和 OpenType 格式 。 
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可 以 通过 以 下 步骤 来 实现 对 服务 器 字体 的 使 用 。 

(1) 下 载 需要 使 用 的 服务 器 字体 的 文件 。 

(2) 使 用 @font-face 把 它 定义 为 服务 器 的 字体 。 

(3) 通过 @font-family 属性 指定 使 用 服务 器 字体 。 

【 例 5-13】 实例 文件 ，ch05\Chap5.13.html)》 使 用 服务 器 字体 。 
<!DOCTYPE html> 

<html> 

<head> 


<meta charset="UTF-8"> 


<title> 使 用 服务 器 字体 </title> 


<style> 
efont-facet /* 先 定义 服务 器 字体 */ 
font-family:name; /* 定 义 字体 的 名 称 */ 


/* 指 定 字体 路 径 , 这 里 是 该 文件 的 同 级 目录 下 ,并 指定 字体 格式 */ 
src:url ("Blazed.ttf") format("TrueType"); 
§ 
div{margin-left: 200px;font-size: 50px;} 
</style> 
</head> 
<body> 
<!-- 在 p 元 素 中 使 用 服务 器 字体 > 
<p style="font-family: name;font-size: 50px;">Happy Birthday!</p> 
<div> 生 日 快乐 </div> 
<p></p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap5.13.html 文件 ， 在 Chrome 浏览 器 中 运行 的 结果 如 图 5-13 所 示 。 
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appy birthday 
生日 快乐 


图 5-13 使 用 服务 器 字体 


5.4.2 ”定义 斜体 、 粗 体 和 粗 斜 体 字 


在 使 用 服务 器 字体 时 ， 不 像 网 页 中 使 用 字体 ， 可 以 指定 字体 的 加 粗 、 倾 斜 等 ， 如 果 要 在 服务 器 字体 中 
使 用 加 粗 和 倾斜 ， 需 要 下 载 相应 的 字体 文件 。 
【 例 5-14】 (实例 文件 ，chos\Chap5.14.html) 定义 斜体 、 粗 体 、 粗 斜体 等 服务 器 字体 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title> 使 用 服务 器 字体 </title> 


<style> 
@font-face{ /* 定 义 普通 的 服务 器 字体 */ 
font-family:name; /* 定 义 普通 字体 的 名 称 */ 


/* 指 定 字体 路 径 ,这 里 是 该 文件 的 同 级 目录 下 , 并 指定 字体 格式 +/ 
src:url ("Delicious-Roman.otf") format ("OpenType"); 
} 
Qfont-face{ 
font-family:namel; 
src:url("Delicious-Italic.otf") format ("OpenType"); 


中 
/* 定 义 粗 体 的 服务 器 字体 */ 
Qfont-face{ 
font-family:name2; 
src:url ("Delicious-Bold.otf") format ("OpenType"); 


LE 
/*+ 定 义 粗 斜 体 的 服务 器 字体 */ 
@font-face{ 
font-family:name3; 
src:url ("Delicious-BoldItalic.otf") format ("OpenType"); 
, 
</style> 
</head> 
<body> 
<p style="font-family: name; font-size: 50px;">Happy Birthday!</p> 
<p style="font-family: namel; font-size: S50px;">Happy Birthday!</p> 
<p style="font-family: name27 font-size: S50px;">Happy Birthday!</p> 
<p style="font-family: name3; font-size: S50px;">Happy Birthday!</p> 
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</body> 
</html> 


相关 的 代码 实例 请 参考 Chap5.14.html 文件 ， 在 Chrome 浏览 器 中 运行 的 结果 如 图 5-14 所 示 。 


[= x 
GC 合 |@ localhost63342/ 毒 码 /ch05/Chap5... 忆 田 食 | 让 


Happy Birthday! 
Happy Birthday! 
Happy Birthday! 


Happy Birthday! 


图 5-14 定义 斜体 、 粗 体 和 粗 斜 体 


5.4.3 ”优先 使 用 客户 端 字 体 


使 用 服务 器 字体 有 一 个 缺点 ， 浏 览 网 页 时 需要 从 远程 服务 器 下 载 字 体 文件 ， 影 响 网 页 的 加 载 速 度 。 所 
以 我 们 还 是 应 该 优先 考虑 使 用 客户 端 字体 ， 只 有 当 客 户 端 没有 这 种 字体 时 ， 才 考虑 使 用 服务 器 字体 作为 替 
代 方 案 。 

在 使 用 @font-face 定义 服务 器 字体 时 ，src 属性 除了 可 以 使 用 url 来 指定 服务 器 文字 的 路 径 之 外 ， 也 可 
以 使 用 local 指定 客户 端 字 体 名 称 。 

【 例 5-15】〗】 实例 文件 ，ch05\Chap5.15.html) 优先 使 用 客户 端 字体 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 优 先 使 用 客户 端 字 体 </title> 
<style> 
@font-face { 
font-family:name; /* 定 义 字体 的 名 称 */ 
/* 客 户 端 一 般 都 有 "华文 彩云 "这 种 字体 */ 
src: local ("华文 彩云 ") ,url ("Blazed.ttf") format("truetype"); 
} 
</style> 
</head> 
<body> 
<p style="font-family: name">Happy Birthday!</p> 
</body> 
</html> 
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相关 的 代码 实例 请 参考 Chap5.15.html 文件 ， 在 Chrome 浏览 器 中 运行 的 结果 如 图 5-15 所 示 。 


回 伟 半 本 月 宫 记 活字 体 。 x 
CO © localhost63342/ 


Happy Birmndaoml 


5-15 ”优先 使 用 客户 端 字体 


5.5 “实践 案例 一 设置 简单 的 文字 效果 


网 页 文本 的 效果 对 一 个 页 面 来 说 非常 重要 ， 因 为 网 页 中 大 部 分 是 文本 。 本 章 介绍 了 文本 的 一 些 设置 样 
式 ， 下 面 就 来 看 一 下 案例 。 

本 案例 主要 是 使 用 CSS 中 的 文本 阴影 (text-shadow) 属性 来 完成 的 ， 实 现 起 来 非常 简单 ， 读 者 可 以 根 
据 自己 的 喜好 来 进行 设置 。 

【 例 5-16】 (实例 文件 ，cho0s\Chaps.16.html) 简单 的 文字 效果 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
-boxl { 
font-family: "楷体"; /* 设 置 字体 的 类 型 */ 
font-size: 80px; /* 设 置 字 体 的 大 小 */ 
color: #f2ece6; /* 设 置 字体 的 颜色 */ 
text-shadow: 0 5px 2px red, Opx -2px lpx #fff; /* 设 置 文字 的 阴影 */ 
font-weight: bold; /*# 设 置 字体 加 粗 */ 
background: #39a8ff; /* 设 置 背景 颜色 */ 
text-align: center; /* 设 置 文本 水 平 居中 */ 
border-radius: 20px; /* 设 置 图 角 边框 */ 
padding: 50px 0; /* 设 置 内 边 距 */ 
和 
</style> 
</head> 
<body> 
<div class="box1"> 
文字 效果 
</div> 
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</body> 
</html> 


相关 的 代码 实例 请 参考 Chap5.16.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 5-16 所 示 。 


“OverVariniest -ec [ETc * 辆 全 妆 
文件 由 ”六 声 (E) 辣 午 (V) 收 宫 夫 (A) 工具 (D 。 帮 肥 (H) 


文字 效 采 


或 1006 


5-16 简单 的 文字 效果 


5.6 ”就 业 面试 技巧 与 解析 


5.6.1 ”面试 技巧 与 解析 (一) 


面试 官 : 我 们 使 用 哪个 属性 来 设置 阴影 ? 
应 聘 者 : 盒子 的 阴影 使 用 box-shadow 属性 来 实现 ， 文 字 的 阴影 使 用 text-shadow 来 实现 。 


5.6.2 面试 技巧 与 解析 (二 ) 


面试 官 : rgba0 和 opacity 设置 透明 度 效 果 有 什么 区 别 ? 
应 聘 者 : rgba0 和 opacity 都 能 实现 透明 效果 ， 但 最 大 的 不 同 是 opacity 作用 于 元 素 及 元 素 内 所 有 子 元 素 
的 透明 度 ， 而 rgba0 只 作用 于 元 素 本 身 的 透明 度 。 设 置 rgba 透明 的 元 素 的 子 元 素 不 会 继承 透明 效果 。 
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使 用 并 美化 网 页 图 像 


后 ”学 习 指 引 


常见 的 网 站 是 使 用 文字 或 者 图 片 来 展示 内 容 的 ， 其 中 文字 是 传递 信息 的 主要 手段 。 本 章 将 使 用 CSS 技 
术 来 美化 网 页 文本 。 


”重点 导读 


* 热 悉 插 入 网 页 图 像 的 方法 。 

* 掌握 设置 网 页 图 像 的 方法 。 

* 掌握 设置 网 页 图 像样 式 的 方法 。 

“掌握 设置 网 页 的 背景 颜色 和 背景 图 像 的 方法 。 


6.1 插入 网 页 图 像 


一 个 网 页 少不了 一 些 优美 的 图 片 ， 图 片 能 直观 、 形 象 地 让 人 明白 网 页 所 要 表达 的 意思 ， 而 一 张 好 的 图 
片 会 给 页 面 带 来 很 高 的 点 击 率 。 下 面 就 来 介绍 一 下 图 片 的 格式 和 如 何 插入 图 片 。 


6.1.1 网 页 图 像 格式 


网 页 中 使 用 的 图 片 格式 有 GIF、 JPG、PNG、BMP、TIFF 等 , 其 中 应 用 最 广泛 的 是 GIF 和 PNG 两 种 格式 。" 


1. GIF 

GIF 是 20 世纪 80 年 代 由 CompuServe 公司 提出 的 图 像 文件 格式 , 它 是 Web 上 最 常用 的 图 像 格式 之 一 ， 
可 以 用 来 存储 各 种 图 像 文件 。GIF 是 通过 减少 组 成 图 像 像 素 的 存储 位 数 和 LZH 压缩 存储 技术 来 减少 图 像 文 
件 的 大 小 的 ，GIF 图 像 文件 很 小 ， 下 载 速度 很 快 ， 在 低 颜色 数 下 GIF 比 JPEG 装载 更 快 ， 可 用 许多 具有 同 
样 大 小 的 图 像 文 件 组 成 动画 ， 在 GIF 图 像 中 可 指定 透明 区 域 ， 使 图 像 具 有 特殊 的 效果 。 
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2. PNG 

PNG 是 20 世纪 90 年 代 提出 的 图 像 文件 存储 格式 ， 其 目的 是 替代 GIF 和 TIFF 文件 格式 ， 同 时 增加 一 
些 GIF 文件 格式 所 不 具备 的 特性 。PNG 用 来 存储 灰 度 图 像 时 ， 灰 度 图 像 的 深度 可 多 到 16 位 ， 存 储 彩 色 图 
像 时 ， 彩 色 图 像 的 深度 可 多 到 48 位 。 

PNG 是 很 好 的 网 络 图 像 格式 ，PNG 格式 具有 不 失真 、 兼 有 GIF 和 JPG 的 色彩 模式 、 网 络 传输 速度 快 
等 特点 。 它 使 用 从 LZ77 派生 的 无 损 数据 压缩 算法 ， 一 般 应 用 于 Java 程序 、 网 页 程序 中 ， 生 成 的 文件 体积 
小 ， 压 缩 比 高 。 


6.1.2 ”插入 图 像 标签 
在 网 页 中 插入 图 像 使 用 <img> 标 签 ， 常 使 用 的 一 些 <img> 标 签 属性 如 表 6-1 所 示 。 


表 6-1 <img> 标 签 属性 


属 性 值 说 明 

a | | 
we 

oa ET 
van 上 的 


【 例 6-1】〔 实 例文 件 ，ch06\Chap6.1.html) 插入 图 像 标 签 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 插 入 图 片 </title> 
</head> 
<body> 
<img src="531540346819325961.jpg"> /* 在 页 面 中 插入 图 片 */ 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap6.1.html 文件 ， 在 IE 浏览 器 中 运行 的 结果 如 图 6-1 所 示 。 


Ci D0 | 本 bd 


6-1 插入 图 片 
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6.2 设置 网 页 图 像 
网 页 中 的 图 片 为 了 满足 排版 要 求 ， 往 往 需要 设置 图 片 的 样式 。 


6.2.1 设置 图 像 路 径 及 文件 


路 径 是 定位 图 像 文件 的 位 置 ， 有 两 种 方式 ， 以 当前 文档 为 参照 点 表示 文件 的 位 置 ， 是 相对 路 径 ， 以 根 、 
目录 为 参照 点 表示 文件 的 位 置 ， 是 绝对 路 径 。 
为 了 方便 介绍 绝对 路 径 和 相对 路 径 ， 假 设 现 有 目录 结构 ， 如 图 6-2 所 示 。 


index.html 


6-2 目录 结构 


1. 绝对 路 径 

例如 ， 在 DD 盘 deme 目录 下 的 img 下 有 一 个 01.jpg 图 像 ， 那 么 它 的 路 径 就 是 D:\demo\img\01.jpg， 像 
这 种 完全 描述 文件 位 置 的 路 径 就 是 绝对 路 径 ， 如 果 想 要 把 01.jpg 插入 index.html 中 ， 绝 对 路 径 表示 方式 
如 下 : 

D:\demo\img\01.jpg 

如 果 使 用 了 绝对 路 径 D:\demo\img\01.jpg 进行 图 片 链接 ， 那 么 本 地 计算 机 中 将 一 切 正常 ， 因 为 在 
D:\demo\img 下 的 确 存 在 01.jpg 这 个 图 片 文件 。 


2. 相对 路 径 

那么 如 何 使 用 相对 路 径 在 index.html 中 插入 01.jpg 呢 ? 其 实 很 简单 ， 只 需要 以 index.html 为 参照 点 ,去 
寻找 01.jpg 即 可 ， 从 目录 结构 图 可 以 发 现 ，index.html 和 img 属于 同一 级 ， 路 径 是 一 样 的 ， 因 此 可 以 定位 到 
img，img 的 下 级 就 是 01.jpg， 使 用 相对 路 径 表 示 图 片 ， 如 下 面 代码 所 示 : 

.Vimg/01.jpg 

使 用 相对 路 径 ， 不 论 将 这 些 文件 放 到 哪里 ， 只 要 index.html 和 01.jpg 文件 的 相对 位 置 没有 发 生 改 变 ， 
就 不 会 出 错 。 

在 相对 路 径 中 ,“./” 表 示 同 级 目录 ,“../” 表 示 上 一 级 目录 ,“.././” 表 示 上 级 的 上 级 目录 ， 以 此 类 推 。 


6.2.2 设置 图 像 的 宽度 和 高 度 


在 HTML 文档 中 ， 图 片 一 般 是 以 原 图 尺寸 来 显示 的 ， 可 以 通过 width (宽度) 和 height (高 度 ) 属性 来 ~ 
设置 图 片 的 尺寸 。 图 片 的 尺寸 可 以 选择 数值 或 者 百分比 ， 数 值 是 绝对 尺寸 ， 百 分 比 是 相对 尺寸 。 
【 例 6-2】 (实例 文件 ，ch06\Chap6.2.html) 设置 图 像 的 宽 和 高 。 


<!DOCTYPE html> 
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<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 图 像 的 宽度 和 高 度 </title> 
</head> 
<body> 
原 图 : 
<img src="531540346819325961.jpg"> 
改变 宽度 和 高 度 后 : 
<img src="531540346819325961.jpg" width="200px"” height="200px"> <!-- 设 置 图 片 的 宽度 和 高 度 --> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap6.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-3 所 示 。 


- ODO x 
加 WsersAdministraton\Desktop\ES\chonChap6: P ~ © BE smeemsim © 
文件 大 至 看 NV) 收 呈 工具 0) 下 芭 ) 


改变 宽度 和 高 度 后 ， 


100% > 


6-3 ”设置 图 像 的 宽度 和 高 度 


6.2.3 ”设置 图 像 的 提示 文字 


图 像 文字 的 提示 效果 使 用 alt 和 title 属性 来 完成 ， 当 图 像 没有 下 载 完成 时 ， 才 会 显示 alt 属性 所 设置 的 
提示 文字 ， 当 把 鼠标 指针 移动 到 图 片上 时 ， 显 示 title 属性 设置 的 提示 信息 。 

【 例 6-3】 (实例 文件 ，ch06\Chap6.3.html) 设置 图 像 的 提示 文字 。 

<!DocTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 
<title> 图 片 的 提示 文字 </title> 
</head> 
<body> 
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<p> 错 误 路 径 使 图 片 下 载 失 败 ,显示 提示 文字 </p> 

<img src="123.jpg" alt=" 美 女 图 片 "> <!-- 设 置 图 片 的 alt 属性 --> 
<img src="531540346819325961.jpg" title=" 美 女 ” > <!-- 设 置 图 片 的 title 属性 --> 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap6.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-4 所 示 。 


i 
由 cuwanvdmnnm PC | Sas xx| 
Koh HE) FEV aN IEM Hm 


卉 误 路 斌 使 图 片 下 载 失 败 ， 显 示 呈 提示 文字 
加 RE < 一 一 一 一 一 ”alt 提 示 文字 


R100% ~ 


6-4 设置 图 像 的 提示 文字 


6.3 设置 网 页 图 像样 式 
当然 也 可 以 使 用 CSS 样式 来 美化 图 片 。 


6.3.1 设置 图 像 边框 
border 属性 用 于 设置 图 片 边 框 ， 代 码 如 下 : 


border: width color style 
width 指定 边框 的 宽度 ，color 指定 边框 的 颜色 ，style 指定 边框 的 样式 。 
【 例 6-4】 (实例 文件 ，ch06\Chap6.4.html) 设置 图 像 边 框 。 


<!DocTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<title> 设 置 图 片 的 边框 </title> 

<style> 

img{ 
border: 10px solid #1896ff; /* 设 置 图 片 的 边框 样式 */ 


汪 
</style> 
</head> 
<body> 
<img src="531540346819325961.jpg"” alt=" 美 女 图 片 "> 


</body> 
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</html> 


相关 的 代码 实例 请 参考 Chap6.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-5 所 示 。 


国 csersWdministrato P - 避 || 局 六 于 引 FB9iDIE x 上 他 交 次 @ 
性 昌 ”“ 辆 日 ， 互 二 Mk 夺 夫 内 “工具 0) 和 到 (H 


图 6-5 设置 图 像 边框 


6.3.2 设置 图 像 不 透明 度 
在 CSS 中 ， 使 用 opacity 属性 设置 图 片 的 不 透明 度 ， 代 码 如 下 : 


opacity: value | inherit; 
value 取 值 在 0~1, 0 表示 完全 透明 , 1 表示 完全 不 透明 。inherit 表示 应 该 继承 父 元 素 opacity 的 属性 值 。 
【 例 6-5】〔 实 例文 件 ，ch06\Chap6.5.html) 设置 图 像 不 透明 度 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 图 片 的 透明 度 </title> 
<style> 
img{ 
opacity:0.5; /* 设 置 图 片 的 透明 度 */ 
</style> 
</head> 
<body> 
<img src="531540346819325961.jpg" alt=" 美 女 图 片 "> 
</body> 
</html> 
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相关 的 代码 实例 请 参考 Chap6.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-6 所 示 。 


二 
< 国人 Be 


6.3.3 ”设置 圆 角 图 像 


border-radius 用 来 设置 图 像 的 圆 角 ， 代 码 如 下 : 

border-radius: 1-4 lengthls /1-4lengthls; 
border-radius 可 以 设置 4 个 值 ， 设 置 一 个 值 时 ， 表 示 4 个 角 设 置 相同 的 圆 角 。 
【 例 6-6】〔 实 例文 件 ，ch06\Chap6.6.html) 设置 图 像 的 圆 角 。 


相关 的 代码 实例 请 参考 Chap6.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-7 所 示 。 
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导 CusersAdmniswat P > 口 || 车 吉本 帮 加 基 x 回 图 
文才 站 多 晶 ”站 看 入 (工具 Mm 帮助 
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图 6-7 设置 圆 角 图 像 


6.3.4 ”设置 阴影 图 像 
box-shadow 属性 用 于 设置 阴影 图 像 ， 代 码 如 下 : 


box, text-shadow: X,Y, blur, color; 


X、 立 分 别 表示 阴影 在 水 平方 向 和 垂直 方向 上 的 位 移 ，blur 表示 模糊 的 半径 ， 最 后 一 个 表 阴 影 的 颜色 。 
【 例 6-7】 (实例 文件 ，chOo6\Chap6.7.html) 设置 图 像 阴影 。 


<!DOCTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<title> 设 置 阴影 图 片 </title> 

<style> 

img{ 
box-shadow: 20px 20px #00FFO00; /* 设 置 图 片 的 阴影 */ 


和 
</style> 
</head> 
<body> 
<img src="531540346819325961.jpg"” alt=" 美 女 图 片 "> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap6.7html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-8 所 示 。 
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图 6-8 设置 阴影 图 像 


6.3.5 设置 图 像 与 文字 的 对 齐 方式 


设置 图 像 与 文字 的 对 齐 方式 ， 一 般 是 设置 图 片 与 文字 垂直 方向 上 的 对 齐 方式 ， 使 用 vertical-align 属性 
来 设置 ， 它 的 属性 值 如 表 6-2 所 示 。 


表 6-2 vertical-align 属性 值 


属 性 值 说 明 

baseline 默认 值 ， 元 素 放 置 在 父 元 素 的 基线 上 
sub 垂直 对 齐 文本 的 下 标 

super 垂直 对 齐 文本 的 上 标 

top 把 元 素 的 项 端 与 行 中 最 高 元 素 的 顶端 对 齐 
text-top 把 元 素 的 顶端 与 父 元 素 字体 的 顶端 对 齐 
middle 把 此 元 素 放 置 在 父 元 素 的 中 部 

bottom 把 元 素 的 底 端 与 行 中 最 低 元 素 的 底 端 对 齐 


【 例 6-8】 (实例 文件 : ch06\Chap6.8.html) 设置 图 像 与 文字 的 对 齐 方式 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 图 片 与 文字 的 对 齐 方式 </title> 
<style> 
-imglf 
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Y 


vertical-align: top; /* 设 置 图 片 顶 端 与 行 中 最 高 元 素 的 顶端 对 齐 */ 
区 
-img21 
vertical-align: bottom; /* 设 置 图 片 放 在 父 元 素 的 中 部 */ 
-img3{ 
vertical-align:middle; /* 设 置 图 片 顶 端 与 行 中 最 高 元 素 的 顶端 对 齐 */ 
和 
</style> 
</head> 
<body> 


<p>top<img src="qwqwwqwa-png" alt=" 小 孩 图 片 " class="imgl"></p> 
<p>bottom<img src="qwqwwqwa.-png" alt=" 小 孩 图 片 " class="img2"></p> 
<p>bottom<img src="qwqwwqwa.png”alt=" 小 孩 图 片 ”class="img3"></p> 


</body> 
</html> 
相关 的 代码 实例 请 参考 Chap6.8.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-9 所 示 。 


ee 口 x 
国 cNUceeydrinceat -| 辐 男 FS 二 
文件 口 。 病 各 6 可 看 V) 收藏 A) 工具 Tm RW(H 


middld 


R100% ~ 


图 6-9 设置 图 像 与 文字 的 对 齐 方式 


6.3.6 ”图 文 混 排 


一 个 普通 的 网 页 最 常见 的 就 是 图 文 混 排 ， 下 面 以 文字 环绕 效果 为 例 进行 介绍 。 
在 CSS 3 中 使 用 float 来 实现 文字 环绕 效果 。 
【 例 6-9】 (实例 文件 ，ch06\Chap6.9.html) 设置 图 文 混 排 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 文字 环绕 </title> 
<style> 
img{ 
float: left; /* 设 置 图 片 左 浮动 */ 


} 
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</style> 

</head> 

<body> 

<img src="aaaadasdas.png" alt=" "> 

关于 魔鬼 城 有 一 段 神奇 的 传说 。 传 说 这 里 原来 是 一 座 雄 伟 的 城堡 ,城堡 里 的 男人 英俊 健壮 ,城堡 里 的 女人 美丽 而 善良 ,城堡 里 的 
人 们 勤 于 劳作 ,过 着 丰衣足食 的 无 忧 生 活 。 然 而 ,伴随 着 财富 的 聚积 ,邪恶 逐渐 占据 了 人 们 的 心灵 。 他 们 开始 变 得 沉 酒 于 玩乐 与 酒色 ， 
为 了 争夺 财富 , 城 里 到 处 充斥 着 尔 庆 我 诈 与 流血 打斗 ,每 个 人 的 面孔 都 变 得 狗 狩 丽 怖 。 天 神 为 了 唤起 人 们 的 良知 ,化 作 一 个 衣衫 被 寝 的 
乞丐 来 到 城堡 。 天 神 告诉 人 们 ,是 邪恶 使 他 从 一 个 富 人 变 成 乞丐, 然而 乞丐 的 话 并 没有 奏效 ,反而 遭 到 了 城堡 里 的 人 们 的 丝 鸟 和 嘱 
讽 。 天 神 一 怒 之 下 把 这 里 变 成 了 废 起 ,城堡 里 所 有 的 人 都 被 压 在 废 起 之 下 。 每 到 夜晚 ,亡魂 便 在 城堡 内 哀 鸣 , 希望 天 神 能 听 到 他 们 性 悔 的 
声音 。 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap6.9.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-10 所 示 。 


站 CNWUserswdministrat DD ”上 ， 属 设 秆 文字 环绕 
文件 (月 ” 蝙 加 (E) ”本 看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


关于 魔鬼 城 有 一 段 神奇 的 传说 。 传 说 这 里 原来 是 一 座 雄 

的 城堡 ， 城 堡 里 的 男人 英俊 健壮 ， 城 堡 里 的 女人 美丽 

而 善 | 过时 的 人 们 灶 务 作 2 直下 全 交大 的 
伴随 着 财 由 人 
和 


的 ， 为 了 
且 双全 天 关外 放 反 本 相生 加 条 每 个 人 的 面 
孔 都 变 得 狠 闻 远 怖 。 天 神 为 了 唉 起 人 们 的 良知 ， 化 作 一 个 衣衫 淮 祝 的 乞 
丐 来 到 城堡 。 天 神 告诉 人 们 ， 是 邪恶 使 他 从 一 个 富 人 变 成 包 丐 ， 然 而 气 
下 的 话 并 没有 者 效 ， 反 而 遭 到 了 城堡 里 的 人 们 的 辱骂 和 嘲讽 。 天 神 一 克 
之 下 把 这 里 变 成 了 废墟 ， 城 堡 里 所 有 的 人 都 被 庄 在 废墟 之 下 。 每 到 夜 
晚 ， 亡 魂 便 在 城堡 内 亮 鸣 ， 希 望 天 神 能 听 到 他 们 慎 履 的 声音 。 


臣 100% ~ 


6-10 ”图 文 混 排 


6.4 设置 网 页 背景 颜色 和 背景 图 
为 了 让 网 页 面 呈 现 更 好 的 效果 ， 还 可 以 设置 网 页 背景 颜色 和 背景 图 。 


6.4.1 设置 背景 颜色 
background-color 属性 用 于 设置 背景 颜色 ， 它 接受 任何 有 效 的 颜色 值 ， 代 码 如 下 : 


background-color: color; 
【 例 6-10】 实例 文件 ，ch06\Chap6.10.html) 设置 背景 颜色 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 背 景 图 片 -</title> 
<style> 
body{background-color: red;} /* 设 置 body 元 素 的 背景 颜色 */ 
</style> 
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</head> 
<body> 

</body> 
</html> 


相关 的 代码 实例 请 参考 Chap6.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-11 所 示 。 


6-11 设置 背景 颜色 


6.4.2 设置 背景 


background-image 属性 用 于 设置 背景 图 ， 代 码 如 下 : 
background-image: url("sre"); 

src 表示 背景 图 的 路 径 。 

【 例 6-11】 〈 实 例文 件 ，ch06\Chap6.11.html) 设置 背景 图 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 背景 图 </title> 
<style> 
divf 
width: 500px; 
height: 300px; 
border: lpx solid red; 


background-image: url("aaaadasdas.png"); /* 插 入 背景 图 */ 
</style> 

</head> 

<body> 

<div></div> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap6.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-12 所 示 。 
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6-12 设置 背景 图 


6.4.3 ”设置 背景 图 平 铺 
background-repeat 用 于 设置 背景 图 是 否 平 铺 ， 它 的 属性 值 如 表 6-3 所 示 。 


表 6-3 background-repeat 属性 值 


属 性 值 说 明 
Tepeat 背景 图 水 平方 向 和 垂直 方向 都 平 铺 
no-repeat 背景 图 不 平 铺 
Tepeat-x 背景 图 水 平方 向 上 平 铺 
repeat-y 背景 图 垂直 方向 上 平 铺 
【 例 6-12】〔 实 例文 件 ，ch06\Chap6.12.html) 设置 图 像 不 平 铺 方式 。 
<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 背 景 图 不 平 铺 </title> 
<style> 
div{ 
width: S00px; 
height: 300px; 
border: lpx solid red; 
background-image: url("aaaadasdas.png"); /* 插 入 背景 图 */ 
background-repeat: no-repeat; /* 设 置 背 景 图 的 平 铺 方式 */ 
) 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap6.12.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-13 所 示 。 
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6-13 ”设置 背景 图 像 不 平 铺 


6.4.4 设置 背景 图 位 置 
background-position 属性 设置 背景 图 像 的 起 始 位 置 ， 它 的 属性 值 如 表 6-4 所 示 。 


表 6-4 _ background-position 属性 值 


属 性 值 说 明 


left top 

left bottom 
right top 
right bottom 


如 果 仅 指 定 一 个 值 ， 其 他 值 将 是 “center” 


第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 左 上 角 是 0% 0%， 右 下 角 是 100% 100%， 如 果 仅 指定 了 一 
有 个 值 ， 其 他 值 将 是 5096。 默 认 值 为 。 096 0% 


第 一 个 值 是 水 平 位 置 ， 第 二 个 值 是 垂直 位 置 。 左 上 角 是 0， 单 位 可 以 是 像素 (0px 0px) 或 任何 其 他 CSS 
| 单位 。 如 果 仅 指定 了 一 个 值 ， 其 他 值 将 是 50% 


inherit 指定 background-position 属性 设置 应 该 从 父 元 素 继承 
【 例 6-13】 实例 文件 ，ch06\Chap6.13.html) 设置 背景 图 像 位 置 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 设 置 背景 图 片 的 位 置 </title> 
<style> 
div{ 
width: 500px; 
height: 300px; 
border: lpx solid red; 


background-image: url("aaaadasdas.png"); /* 插 入 背景 图 */ 
background-repeat: no-repeat; /# 设 置 背景 图 的 平 铺 方式 */ 
background-position:20% 20%; /# 设 置 背景 图 插入 的 位 置 */ 
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</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap6.13.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 6-14 所 示 。 
| | 
司 Curerewdmirira Dv 0 | GB Eas x| 
文 伯 站 ”入 咒 (E) 过 看 (V| 。 必 凉 去 内) 工 各 (大助 (H) 
lo0% 


6-14 设置 背景 图 位 置 


6.4.5 设置 渐变 背景 


CSS 3 可 以 让 背景 产生 渐变 效果 ， 渐 变 属性 有 两 种 ， 即 线性 渐变 〈1linear-gradient) 和 径 向 渐变 
(radial-gradient )。 

线性 渐变 语法 如 下 : 

linear-gradient (方向 ,颜色 1, 位 置 1, 颜 色 2, 位 置 2...) 


关于 渐变 ,虽然 浏览 器 已 经 支持 ,但 webkit 内 核 的 浏览 器 还 没有 去 掉 前 缀 -webkit-, 语法 和 新 标准 也 不 
太一 样 ， 要 在 Chrome、Safari、Firefox 中 实现 渐变 效果 ， 需 要 加 上 前 缀 -webkit-。IE9+ 需 要 加 前 缀 -ms-。 

对 于 线性 渐变 的 方向 ， 只 要 设置 起 始 位 置 ， 例 如 top 表示 由 上 至 下 ，right 表示 由 右 到 左 。bottom 表示 
由 下 到 上 , left 表示 由 左 到 右 , top right 表示 由 右上 到 左下 , 也 可 以 用 角度 表示 30” 表示 由 左下 到 右上 , -30* 
表示 由 左上 到 右 下 。 

【 例 6-14】 (实例 文件 ，cho6\Chap6.14.html) 线性 渐变 linear-gradient)。 


<!DocTYPE html> 

<html> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

<style> 

div{ width: 200px;height: 200px;float: left; margin-left: 15px;text-align: center;} 
/* 设 置 线 性 渐变 背景 颜色 ， 兼 容 webkit 内 核 的 浏览 器 */ 

-divi{background: -webkit-linear-gradient (left, black, white)} 
-div2{background: ~-webkit-linear-gradient (left top, black, white)} 
-div3{background: -webkit-linear-gradient (45deg, black, white)} 
</style> 
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</head> 

<body> 

<div class="divl"> 由 左 至 右 </div> 
<div class="div2"> 由 左上 至 右 下 </div> 
<div class="div3">45deg 方向 </div> 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap6.14.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 6-15 所 示 。 


图 localhost63342/only1/7htr X 


© localhost:63342/anli/1/" 疏 加 


6-15 ”渐变 背景 实例 


6.5 “实践 案例 一 一 独特 的 瀑布 流 效果 


本 章 介 绍 了 图 像 的 知识 ， 下 面 利 用 相关 知识 来 完成 一 个 瀑布 流 的 案例 。 

本 案例 使 用 表格 来 设计 一 个 瀑布 流 布局 ， 实 现 的 原理 很 简单 ， 只 是 根据 图 片 合并 对 应 的 表格 ， 表 格 设 
计 完 成 后 ， 给 表格 插入 背景 图 片 ， 使 用 CSS 3 新 属性 “background-size: cover:” 使 图 片 布 满 表 格 即 可 。 

【 例 6-15】 (实例 文件 ，ch06\Chap6.15.html) 瀑布 流 效果 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
ta{ 
width: 200px; 
height: 200px; 
background-image: url("aaaadasdas.png");  ”/* 插 入 背景 图 *#/ 
background-size: cover; /* 设 置 背景 图 铺面 整个 容器 / 
</style> 
</head> 
<body> 


<table> <!-- 添 加 表格 -> 
CE <!-- 添 加 行 --> 


<td rowspan="2"></td> <!-- 添 加 单元 格 , 且 横 跨 2 行 --> 
<td></td> 
<td></td> 


096 


第 贺 章 使 有 并 美化 网 页 图 像 


<td></td> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td rowspan="2"></td> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
</table> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap6.15.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 6-16 所 示 。 


全 Wserspdministrat Pp - © | BTite 四 
文件 月 ” 妨 缠 EE) 。 豆 看 (/) 收藏 交 ( 凡 。 工具 (]) 。 帮助 (H) 


图 6-16 独特 的 瀑布 流 效果 


6.6 ”就 业 面试 技巧 与 解析 


6.6.1 面试 技巧 与 解析 (一) 
面试 官 : 标签 上 title 与 alt 属性 的 区 别 是 什么 ? 


应 聘 者 : 
alt 的 属性 用 于 图 片 不 显示 时 ， 用 文字 代替 的 内 容 。 
title 为 元 素 提 供 信息 。 
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6.6.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 你 对 line-height 是 如 何 理解 的 ? 

应 聘 者 : line-height 和 height 都 能 撑 开 一 个 高 度 ， 如 果 一 个 标签 没有 定义 height 属性 ， 那 么 其 最 终 表 现 
的 高 度 是 由 line-height 决定 的 ， 而 不 是 容器 内 的 文字 内 容 。 把 line-height 值 设 置 为 height 一 样 大 小 
的 值 ， 可 以 实现 单行 文字 的 垂直 居中 。 
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在 了 解 了 标签 的 基本 概念 、 基 本 应 用 之 后 ， 本 篇 将 详细 介绍 Web 前 端 开 发 的 核心 应 用 ， 包 括 网 页 中 超 
链接 、 网 页 列表 、 网 页 表格 以 及 网 页 表单 的 美化 ， 网 页 布局 、 网 页 动画 特效 果 以 及 事件 机 制 等 。 通 过 本 篇 
的 学 习 ， 读 者 将 对 Web 前 端 开发 有 较 高 的 掌握 水 平 。 


第 7 章 使 用 并 美化 网 页 超 链 接 

第 8 章 使 用 并 美化 网 页 列表 

第 9 章 使 用 并 美化 表格 

第 10 章 使 用 并 美化 表单 

第 11 章 Web 标准 与 网 页 布局 

第 12 章 Css 3 盒子 模型 与 页 面 布局 
第 13 章 使 用 网 页 动画 效果 


第 7 章 
使 用 并 美化 网 页 超 链 接 


>” 学 习 指引 


在 网 页 中 超 链接 无 处 不 在 ， 它 在 本 质 上 属于 网 页 的 一 部 分 ， 它 是 一 种 允许 用 户 同 其 他 网 页 或 站 点 之 间 
进行 连接 的 元 素 。 各 个 网 页 链接 在 一 起 后 ， 才 能 真正 构成 一 个 网 站 。 
本 章 将 使 用 CSS 样式 来 美化 超 链接 。 


三 重点 导读 


。 热 悉 超 链接 的 基础 。 

。 掌 握 超 链 接 的 路 径 。 

。 掌 握 定义 内 部 链接 。 

。 掌 握 定义 锚 链 接 。 

。 熟 悉 使 用 CSS 样式 美化 超 链接 。 


7.1 超 链 接 基础 


超 链接 是 指 从 一 个 网 页 指向 一 个 目标 的 连接 关系 ， 这 个 目标 可 以 是 另 一 个 网 页 ， 也 可 以 是 相同 网 页 上 
的 不 同位 置 ， 还 可 以 是 一 个 图 片 、 一 个 电子 邮件 地 址 、 一 个 文件 ， 甚 至 是 一 个 应 用 程序 。 而 在 一 个 网 页 中 
用 来 作为 超 链接 的 对 象 ， 可 以 是 一 段 文本 或 者 是 一 个 图 片 。 当 浏览 者 单 击 链接 的 文字 或 图 片 后 ， 链 接 目标 
将 显示 在 浏览 器 上 ， 并 且 根据 目标 的 类 型 来 打开 或 运行 。 


7.2 超 链 接 路 径 


超 链接 的 路 径 分 相对 路 径 和 绝对 路 径 ， 与 插入 图 片 的 路 径 类 似 ， 详 细 的 请 参考 第 6 章 6.2.1 节 “ 设 置 图 
像 路 径 及 文件 ”这 一 节 。 
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7.3 定义 超 链接 和 热点 区 域 


超 链接 是 网 页 设计 中 比较 重要 的 一 步 ， 通 过 它 ， 可 以 创建 网 页 与 网 页 之 间 的 关系 ， 本 节 将 介绍 超 链接 
的 有 关 知 识 。 


7.3.1 定义 超 链 接 


超 链接 标签 是 <a hre 伍 ”#”></a>， 在 超 链接 中 可 以 设置 文字 、 图 片 等 。 
href 属性 设置 的 是 该 链接 所 要 链接 的 网 址 或 者 文件 路 径 ， 代 码 如 下 : 


<a href="http://www.baidu.com"> 
<a href="index.html"> 


7.3.2 ”链接 的 目标 窗口 


默认 情况 下 ， 当 单 击 超 链接 时 ， 目 标 页 面 会 在 当前 窗口 中 显示 ， 替 换 当前 页 面 的 内 容 。 如 果 要 在 单 
击 某 个 链接 以 后 , 打开 一 个 新 的 浏览 器 窗口 , 在 这 个 新 窗口 中 显示 目标 页 面 , 就 需要 使 用 <a> 标 签 的 target 
属性 。 
target 属性 有 4 个 属性 值 ， 分 别 为 _ blank、_self、_top 和 _parent。 由 于 HTML 5 不 支持 框架 ， 所 以 _top 
和 parent 这 两 个 取 值 不 常用 。 本 节 介 绍 _ blank 和 _self 这 两 个 属性 值 。 blank 定义 在 新 窗口 中 显示 超 链接 页 
面 ，_self 定义 在 自身 窗口 中 显示 超 链接 页 面 。 

【 例 7-1】 (实例 文件 ，ch07\Chap7.1.html) _blank 属性 值 。 

<!DOCTYPE html> 

<html> 


<head> 
<meta charset="UTF-8"> 


<title>Title</title> 
</head> 
<body> 
<a href="index.html"” target=" blank"> 新 窗口 中 打开 </a> <!-- 创 建 超 链接 , 定义 在 新 窗口 中 显示 超 链接 页 面 --> 
</body> 
</html> 


新 窗口 index.html 文件 : 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 新 窗口 </title> 

</head> 

<body> 

我 是 超 链 接 的 内 容 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap7.1.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-1 所 示 。 单 击 超 链接 时 ， 
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在 新 窗口 中 打开 目标 页 面 ， 如 图 7-2 所 示 。 


0o x = 
于 csersWdministnat PD 0 | BTte Uere eninierst D ~ © BRN Sen 
文件 (有 纺 久 (站 。 王 二 V) 收 吉 开拓 才 尼 (H 文件 昌 。 芋 吉日“ 生 看 M) 改 站 天 工具 (1) 帮 肥 (H) 
已 Dd 
新 窗口 中 打开 我 是 超 链接 的 内 容 


185% ~ 


图 7-1 页 面 加 载 完 效果 图 7-2” 超 链接 到 目标 页 面 


7.3.3 ”定义 不 同 目标 的 超 链接 


超 链接 除了 可 以 指向 .html 文件 外 ， 还 可 以 指向 其 他 类 型 的 文件 ， 如 图 片 文件 、 声 音 文件 、 视 频 文 件 、 
word、FTP 服务 器 、 其 他 文件 、 电 子 邮件 等 。 
【 例 7-2】 (实例 文件 ，cho7\Chap7.2.html) 定义 不 同 目标 的 链接 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<a href="02.jpg"> 链 接 到 图 片 文件 </a> <!-- 设 置 目标 为 图 片 的 超 链接 --> 


<br/> 


<a href="index.html"> 链 接 到 index 文件 </a> <!-- 设 置 目标 为 HTML 文件 的 超 链接 --> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap7.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-3 所 示 。 


司 GWUserswdministrat P -上 车 下 
文件 ()” 坊 雪 (EF) 豆 看 V) 。 改 茂 穴 A) I 内 mn ” 


链接 到 图 片 文 件 
链接 到 index 文 件 


或 100% ~ 


图 7-3 定义 不 同 目标 的 超 链接 


7.3.4 定义 热点 区 域 


有 时 为 了 满足 不 同 的 需要 ， 一 张 图 片上 会 有 好 几 个 超 链接 ， 这 就 是 图 片 的 热点 区 域 。 热 点 区 域 其 实 就 
是 将 一 张 图 片 分 成 许多 份 ， 当 浏览 者 访问 点 击 不 同 的 区 域 后 ， 会 超 链接 到 不 同 的 目标 页 面 。 在 HIML 5 中 
可 以 为 图 片 创建 3 种 类 型 的 热点 区 域 : 矩形 、 圆 形 和 多 边 形 。 

创建 热点 区 域 使 用 <map> 标 签 和 <area> 来 实现 。<map> 标 签 只 有 一 个 name 属性 , 其 作用 是 为 区 域 命名 ， 
其 值 必须 与 <img> 标 签 的 usemap 属性 值 相同 。<area> 标 签 有 3 个 属性 值 ， 分 别 为 shape、coords 和 href。 

【 例 7-3】 实例 文件 ，ch07\Chap7.3.html》 定 义 热 点 区 域 。 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<img src="02.jpg"” alt="" usemap="#Map"> <!-- 插 入 图 片 并 设置 usemap 属性 --> 
<map name="Map"> <!-- 创 建 map 标签 ,添加 name 属性 , 属性 值 等 于 图 片 usemap 属性 的 属性 值 去 掉 “#”--> 
<!-- 设 置 图 片 的 矩形 热点 区 域 --> 
<area shape="rect" coords="20,20,150,150" href="03.jpg" alt=" 耸 形 "> 
<!-- 设 置 图 片 的 贺 形 热点 区 域 --> 
<area shape="circle" coords="120,120,50" href="#" alt=" 贺 形 "> 
</map> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap7.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-4 所 示 。 当 单 击 图 片上 和 矩 
形 热点 区 域 时 ， 将 超 链接 到 目标 页 面 ， 如 图 7-5 所 示 。 


- 0O x - ODO x 
© wseraoninistrat P+ ©| BTue 回 CUsersAdministrat PD = © || @ cNusersAdministr 
文件 (站 编 坟 (E) 查看 V) 收 大 交 (A) 工具 站 帮助 文件 (站 沪 (E 查看 收 六 交 (A) 工具 站) 帮助 (H) 
入 
v 
R25% ~ 
图 7-4 页面 加 载 完 效果 图 7-5 新 页 面 效 果 


7.4 定义 锚 点 超 链 接 


锚 点 (anchor) 其实 就 是 超 链接 的 一 种 ， 是 一 种 特殊 的 超 链接 。 它 可 以 分 两 种 情况 ， 一 种 是 链接 到 本 页 
面 ， 另 一 种 是 链接 到 其 他 页 面 。 本 节 将 详细 介绍 。 


7.4.1 建立 锚 点 超 链接 


建立 锚 超 链接 很 简单 ， 只 需要 给 超 链接 目标 添加 记 或 者 name 属性 ， 超 链接 的 href 属性 设置 成 “#” 加 
上 记 或 者 name 属性 的 值 就 可 以 了 ， 代 码 如 下 : 


<a href="#a"></a> 
<div id="a"></div> 
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六 7.4.2 ” 超 链 接 同一 页 面 中 的 锚 点 


链接 同一 个 页 面 中 锚 点 ， 就 是 从 页 面 中 的 某 个 位 置 链接 到 本 页 面 中 想 要 滚动 到 的 地 方 ， 如 看 电子 书 时 ， 
通过 点 击 目录 ， 可 以 到 达 想 要 看 的 章节 内 容 。 


【 例 7-4】 (实例 文件 ，ch07\Chap7.4html) 超 链接 同一 个 页 面 中 的 错 点 。 

<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 内 部 错 链 接 </title> 

</head> 

<body> 
<a href="#inside"> 第 一 章 学 习 HTML 基础 </a> <!-- 创 建 锚 链 接 --> 
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> 
<p id="inside"> 第 一 章 </p> <!-- 创 建 锚 点 --> 
<img src="02.jpg” alt=" 美 丽 的 夜景 "> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap7.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-6 所 示 。 当 单 击 锚 超 链接 
时 ， 页 面 将 跳 转 到 锚 点 的 位 置 ， 如 图 7-7 所 示 。 


过 区 = 评 麻 
i (OO 
文件 (F) 旦 名 (E)】 查看 (V) 和 者 58A)】 工 内 [帮助 (HI 文件 站“ 畏 硬 (5) 查看 (W) 收 戈 0(A) 工具 (T) 大 划 (H) 
TM 页 各 
锚 链 按 
锚 点 
可 a 
办 
Ea 
< > 
TI > 
图 7-6 页 面 加 载 完 效果 图 7-7 锚 点 的 位 置 


7.4.3 ” 超 链接 到 其 他 页 面 中 的 锚 点 


链接 到 其 他 页 面 中 的 锚 点 其 实 很 简单 ， 只 需要 在 错 点 的 前 面 加 上 该 页 面 的 名 字 即 可 。 
【 例 7-5】〔 实 例文 件 ，ch07\Chap7.5.html) 链接 到 其 他 页 面 中 的 锚 点 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
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<p> 外 部 错 链 接 ,将 链接 到 页 面 中 id 为 outside 的 元 素 的 位 置 </p> 

<a href=" 页 面 .html#outside"> 外 部 错 链 接 </a> <!-- 创 建 外 部 文件 锚 链 接 --> 
</body> 

</html> 


页 面 .html 文件 : 


<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<h1> 美 丽 的 夜景 </h1> 
<img src="02.jpg”alt=" 美 丽 的 夜景 "> 
<h1> 天 池 </hl> 
<img src="03.jpg"” alt=" 天 池 "> 
<hl id="outside"> 宁 静 的 小 道 </hl> <!-- 创 建 外 部 文件 锚 点 --> 
<img src="04.jpg" alt=" 宁 静 的 小 道 "> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap7.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-8 所 示 。 当 单 击 “ 外 部 锚 
链接 ”时 ， 页 面 将 跳 转 到 “页 面 .html” 的 锚 点 ， 效 果 如 图 7-9 所 示 。 


交尾 们 。 卉 提要 下 M 区 介 二 工具。 机 


宁 欧 的 小 道 


oO x 
© vaninisrat p+- © Em 
文件 (总 (E) 查看 V) 收藏 夫 A 工具 (T) 大 ” 


外 部 锚 链接 ， 将 链接 到 页 面 中 id 


为 outside 的 元 素 的 位 置 
外 部 锚 链 接 
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图 7-8 页 面 加 载 完 效果 图 7-9 其 他 页 面 的 锚 点 位 置 


7.5 使 用 CSS 样式 美化 超 链接 


人 们 浏览 网 页 时 ， 会 发 现 网 页 中 超 链接 的 样式 是 各 种 各 样 的 ， 本 节 使 用 CSS 样式 来 美化 超 链接 。 
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是 7.5.1 定义 按钮 式 超 链接 样式 
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本 案例 是 将 超 链接 设计 成 按钮 的 样式 ， 


具体 的 CSS 样式 请 参考 案例 中 的 代码 以 及 其 中 的 注释 。 


【 例 7-6】 (实例 文件 ，ch07\Chap7.6html) 按钮 式 链接 样式 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title> 按 钮 式 链接 样式 </title> 


<style> 
af 
display: block; /* 把 超 链 接 a 转变 为 块 级 元 素 */ 
width: 200px; /* 设 置 超 链接 的 宽度 */ 
height: S50px; /* 设 置 超 链 接 的 高 度 */ 
background: #FF66FF; /* 设 置 超 链 接 的 背景 颜色 */ 
color:white; /* 设 置 超 链接 的 字体 颜色 */ 
text-align: center; /* 设 置 文 本 水 平 居 中 */ 
line-height: S50px; /* 设 置 行 高 */ 
font-size: 20px; /* 设 置 超 链 接 的 字体 大 小 */ 
text-decoration: none;  ”/* 去 掉 <a> 标 签 自 带 的 下 画 线 */ 
font-weight: bold; /*# 设 置 字体 加 粗 */ 
border-radius:10px; /* 设 置 加 角 边框 */ 
margin-top: 15px; /* 设 置 上 边 外 边 距 */ 
letter-spacing:8px; /* 设 置 字符 间距 */ 
’ 
</style> 
</head> 
<body> 


<a href="#"> 首 snbsp; snbsp; 页 </a> 
<a href="#"> 列 表 页 </a> 

<a href="#"> 详 情 页 </a> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap7.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-10 所 示 。 


文件 月 


妨 各 (E) 豆 看 (V| 。 收 莹 夫 (A) 工具 () 帮助 、 


- DO x 
司 cusersdminisat PD ~ © | Bn 


县 130% > 


列表 页 


图 7-10 定义 按钮 式 超 链接 样式 
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7.5.2 ”定义 立体 超 链 接 样式 


对 于 链接 样式 ， 把 超 链接 的 外 观 设计 成 立体 的 ， 给 人 一 种 忍 不 住 想 点 击 的 感觉 。 本 案例 是 通过 设计 边 
框 的 不 同 颜色 来 实现 的 。 
【 例 7-7】 〈 实 例文 件 ，ch07\Chap7.7html) 立体 链接 样式 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 立 体 链接 样式 </title> 


<style> 
af 

display: block; /*# 把 超 链接 a 转变 为 块 级 元 素 */ 
width:150px; /* 设 置 超 链接 的 宽度 */ 
height: 50px; /* 设 置 超 链接 的 高 度 */ 
font-size: 22px; /* 设 置 超 链接 的 字体 大 小 */ 
font-weight: bold; /* 设 置 超 链接 的 字体 加 粗 */ 
text-align:center; /* 设 置 文本 水 平 居 中 */ 
line-height: 50px; /* 设 置 超 链接 的 行 高 */ 
border-radius: 10px; /* 设 置 贺 角 边框 */ 
text-decoration: none; 
background-color:#cccccc7 /* 设 置 背 景 颜 色 */ 


border-right:#222222 10px solid; /* 设 置 左边 框 样式 */ 
border-bottom:#222222 10px solid; /* 设 置 底 边 框 样式 */ 
border-left:#dddddd 10px solid; ”/* 设 置 左边 框 样式 */ 


border-top:#dddddd 10px solid; /* 设 置 上 边框 样式 */ 
1 
</style> 

</head> 
<body> 
<a href="https://www-baidu.com/"> 跳 转 </a> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap7.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-11 所 示 。 


如 问 


可 cvweeyammes -| 副 


文人 月 入 归咎 过 下 站 宣 A 工具 由 


7-11 定义 立体 超 链接 样式 


7.5.3 ”定义 文章 中 的 超 链接 样式 


在 浏览 一 些 网 页 时 ， 有 时 会 出 现 不 一 样 颜色 字体 的 文字 ， 这 些 文字 都 可 以 超 链接 。 本 案例 在 诗歌 中 的 
一 些 关键 词 上 加 了 超 链接 ， 并 美化 了 超 链接 的 样式 。 
【 例 7-8】 实例 文件 ，ch07\Chap7.8.html》 定 义 文章 中 的 超 链接 。 
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Nb/ 


下 


相关 的 代码 实例 请 参考 Chap7.8.html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 7-12 所 示 。 当 把 鼠标 指针 悬 
浮 到 “李清照 ” 超 链接 上 时 ， 样 式 变化 效果 如 图 7-13 所 示 。 


OE -6 后 aa 全 型 


六 省 朋 “办 生日。 考 而 MI 家 于 兴工 大 区 


一 前 梅 


李清照 
红 攻 香 残 玉 欠 秋 ， 轻 解 罗 案 ， 独 上 兰 舟 。 云 中 谁 琳 锦 书 红 蒜 香 残 玉 争 秋 ， 轻 解 罗 崇 ， 独 上 兰 舟 。 云 中 谁 霖 锦 书 
来 ? 历 字 回 时 ， 昌 满 西 楼 。 花 自 束 志 水 自流 ， 一 入 料 来 ? 砍 字 回 时 ， 因 请 西 杰 。 花 自 台 专 水 自 芒 ， 一 种 狂 
是 ， 两 处 闲 禾 。 是 情 无 计 可 消除 ， 才 下 牛头 ， 序 上 心头 = 里 ， 丙 处 亲 笋 。 呈 情 无 计 可 消除 ， 才 下 导 头 ， 却 上 心头 。 


bY. 


图 7-12 ”页面 加 载 完 效果 图 7-13 是 时 超 名 护 的 样式 类 果 
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7.5.4 ”定义 图 像 交换 超 链接 样式 


在 浏览 页 面 时 ， 有 时 当 把 鼠标 指针 悬浮 到 超 链接 上 面 时 ， 会 发 现 换 了 一 张 背景 图 片 ， 和 精灵 图 很 像 。 
本 案例 是 给 超 链接 设置 一 张大 的 背景 ， 通 过 background-position 来 定位 图 片 位 置 。 
【 例 7-9】 (实例 文件 ，ch07\Chap7.9.html》 图 片 交换 链接 样式 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title> 图 片 交 换 链 接 样式 </title> 


<style> 

af 
display: block; /* 把 超 链 接 a 转变 为 块 级 元 素 */ 
width: 200px; /* 设 置 超 链接 的 宽度 */ 
height: S50px; /* 设 置 超 链接 的 高 度 */ 
color:white; /* 设 置 超 链接 的 字体 颜色 */ 
text-align: center; /* 设 置 文本 水 平 居中 */ 
line-height: S50px; /* 设 置 超 链接 的 行 高 +/ 
font-size: 20px; /* 设 置 超 链接 的 字体 大 小 */ 
text-decoration: none; /* 去 掉 超 链接 自 带 的 下 画 线 */ 
font-weight: bold; /* 设 置 超 链接 的 字体 加 粗 */ 
border-radius:10px; /* 设 置 超 链接 贺 角 边框 */ 
letter-spacing:8px; /* 设 置 字 符 间距 +/ 
background-image: url("06.png"); /* 插 入 背景 图 片 */ 

| 

a:hover{ 


background-position:center bottom; /* 鼠 标 指针 是 浮 超 链接 时 显示 图 片 的 下 半 部 分 */ 
. 


</style> 
</head> 
<body> 
<a href="https://www.baidu.com/"> 首 snbsp; snbsp; 页 </a> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap7.9.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-14 和 图 7-15 所 示 。 
二 口 x es 口 x 
知 CNUserswdministrat ~C | 大吉 站 CUsersAdministrat PD- 0 感 四 
文件 (有 锦 罚 (E) ”可 看 (V】 收藏 夫 A) 工具 ” 文件 将 铝 (E) 得 看 (V) 收藏 夫 A) 工具 ” 


> 


https:/ /ww baidu.com/ 
图 7-14 页面 加 载 完 效果 图 7-15 鼠标 指针 悬浮 时 超 链 接 的 样式 效果 
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本 案例 是 通过 超 链接 自身 所 带 的 CSS 3 伪 类 来 设计 的 ， 包 括 link、visied、hover、active 等 ， 一 定 要 按 
这 个 顺序 来 设置 ， 否 则 有 些 效果 会 不 显示 。 


7.6 ”实践 案例 一 一 鼠标 指针 跟随 的 超 链接 样式 


本 节 使 用 超 链接 的 CSS 3 伪 类 来 设计 超 链 接 在 不 同 阶段 显示 的 效果 。 


【 例 7-10】 (实例 文件 ，cho7\Chap7.10.html) 鼠标 跟随 的 链接 样 。 


<!DOCTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 
<title>Title</title> 


<style> 


af 
display:block; 
width:200px; 
height:50px; 
color:white; 
text-align:center; 
line-height:50px; 
font-size:20px; 
text-decoration:none; 
font-weight :bold; 
border-radius:10px; 
letter-spacing:8px; 
border: lpx solid red; 
} 
a:link{ 
background: #000000; 
a:visited { 
background:#0000FF; 
} 
a:hover { 
background: #ff7f24; 
} 
a:active { 
background: #00FFOO; 


} 


</style> 
</head> 


<body> 


<a href="#"> 开 始 </a> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap7.10html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 7-16 所 示 。 


/* 把 超 链接 a 转变 为 块 级 元 素 */ 
/* 设 置 超 链接 的 宽度 */ 
/* 设 置 超 链接 的 高 度 +/ 
/*# 设 置 超 链接 的 字体 颜色 +/ 
/* 设 置 文 本 水 平 居中 */ 
/* 设 置 行 高 */ 

/* 设 置 字 体 大 小 */ 

/* 去 掉 拆 链接 的 下 画 线 */ 
/* 设 置 字体 加 粗 */ 

/* 设 置 回 角 边框 +/ 

/* 设 置 字 符 间 距 */ 

/+ 设置 边框 */ 


/* 设 置 a 对 象 在 未 被 访问 前 的 样式 +/ 


/* 设 置 a 对 象 在 其 链接 地 址 已 被 访问 时 的 样式 */ 


/* 设 置 a 对 象 在 鼠标 指针 悬浮 时 的 样式 */ 


/* 设 置 a 对 象 在 被 用 户 单 击 未 松 开 时 的 样式 */ 


第 项 章 使 用 并 美化 网 页 超 链接 


EEE 一 一 > Jink: 设 理 a 对 象 在 未 被 访问 前 的 样式 


开始 Visited; 设 本 a 对 象 在 其 超 包 接地 站 忆 被 
ss 访问 idBj 的 样式 


[a hever; 设置 对 名 在 其 自 标 指 计时 停 时 的 
样式 

active: 设置 对 象 在 被 用 户 单 击 未 松 开 鼠 
标 时 的 样式 


图 7-16 鼠标 指针 跟随 的 超 链接 样式 


7.7 ”就 业 面试 技巧 与 解析 
7.7.1 面试 技巧 与 解析 〈 一 ) 


面试 官 : display: none 与 visibility: hidden 的 区 别 是 什么 ? 

应 聘 者 : display: none 与 visibility: hidden 主要 有 两 个 区 别 。 

(1) display: none 会 把 元 素 完全 从 泻 染 树 中 移 除 ,不 占据 任何 空间 ; visibility: hidden 不 会 把 元 素 从 泻 染 
树 移 除 ， 元 素 继续 占据 空间 ， 只 是 内 容 不 可 见 。 

(2) display: none 是 非 继承 属性 ， 子 孙 节 点 的 消失 是 由 于 元 素 从 演 染 树 中 移 除 造成 的 ， 通 过 修改 子孙 节 
点 属性 无 法 显示 。visibility: hidden 是 继承 属性 ， 子 孙 节 点 的 消失 是 由 于 继承 了 visibility: hidden 属性 ， 通 过 
设置 visibility: visible 可 以 让 子孙 节点 显 式 。 


7.7.2 面试 技巧 与 解析 (二 ) 


面试 官 : 说 说 超 链接 target 属性 的 取 值 和 作用 。 

应 聘 者 : target 属性 指定 所 链接 的 页 面 在 浏览 器 窗口 中 的 打开 方式 。 

它 的 属性 值 有 4 种 : 

_blank: 在 新 浏览 器 窗口 中 打开 链接 文件 。 

_parent: 将 链接 的 文件 载 入 含有 该 链接 框架 的 父 框架 集 或 父 窗口 中 。 如 果 含有 该 链接 的 框架 不 是 嵌 套 
的 ， 则 在 浏览 器 全 屏 窗口 中 载 入 链接 的 文件 ， 就 像 self 参数 一 样 。 

_self: 在 同一 框架 或 窗口 中 打开 所 链接 的 文档 ， 此 参数 为 默认 值 ， 通 常 不 用 指定 。 

_top: 在 当前 的 整个 浏览 器 窗口 中 打开 所 链接 的 文档 ， 因 而 会 删除 所 有 框架 。 
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第 8 章 
使 用 并 美化 网 页 列表 


过 学 习 指引 


网 页 列表 是 制作 网 页 菜单 的 基础 元 素 ， 而 网 页 菜单 的 风格 往往 影响 网 站 的 整体 风格 ， 所 以 大 部 分 的 网 
站 都 会 花费 大 量 的 时 间 和 精力 去 制作 各 种 各 样 的 网 页 菜单 。 本 章 将 介绍 列表 相关 知识 以 及 使 用 CSS 技术 来 
美化 网 页 列表 。 


”重点 导读 


。 掌 握 列表 标签 的 用 法 。 
。 热 悉 列表 的 常用 应 用 。 
。 热 悉 设 计 CSS 样式 美化 列表 。 


8.1 列表 标签 


列表 〈List) 是 用 来 将 相关 资料 以 条 目的 形式 有 序 或 者 无 序 排列 而 形成 的 表 。 常 用 的 列表 有 无 序列 表 、 
有 序列 表 和 定义 列表 3 种 。 


1 无 序列 表 


无 序列 表 <ul> 是 网 页 中 最 常用 的 列表 之 一 ， 使 用 <li> 标 签 罗列 每 个 项 目 , 每 个 项 目前 面 默认 的 自 带 黑色 
实心 圆 。 在 CSS 3 中 可 以 通过 list-style-type 属性 来 定义 无 序列 表 前 面 的 符号 ， 无 序列 表 中 list-style-type 属 
性 值 如 表 8-1 所 示 。 


表 8-1 无 序列 表 中 list-style-type 属性 的 属性 值 
属 性 值 说 明 
disc 实心 加 


第 贺 章 使 用 并 美化 网 页 列表 


续 表 
属性 什 说 明 
ei 空心 加 
二 实心 方块 
i 不 使 用 任何 标记 


【 例 8-1】 实例 文件 ，ch08\Chap8.1.html) 无 序列 表 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 无 序列 表 </title> 


</head> 
<body> 
<ul> <!-- 创 建 无 序列 表 -一 > 
<1i> 第 一 章 </1i> <!-- 创 建 无 序列 表 项 目 --> 
<1i> 第 二 章 </1i> 
章 </1i> 
<1i> 第 四 章 </1i> 
<1i> 第 五 章 </1i> 
</ul> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap8.1.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 8-1 所 示 。 
可 以 设置 表 8-1 中 的 属性 值 来 改变 无 序列 表 的 默认 样式 ， 这 里 设置 属性 值 为 circle， 代 码 如 下 ; 


<style> 
ul{ 
list-style: circle;  /* 设 置 无 序列 表 的 符号 样式 为 空心 小 图 点 */ 
color: blue; 
} 
</style> 


在 正 浏 览 器 中 运行 的 结果 如 图 8-2 所 示 。 


FE x kee FE x a 
CO Dcahor 全 CO Oochox es 肥 基 人 契 | + 
。 第 一 章 = 第 一 章 
。 第 二 章 第 二 章 
。 第 。 第 三 章 
。 第 四 章 第 四 章 
。 第 五 章 。 第 五 章 
图 8-1 无 序列 表 图 8-2 circle 属性 值 效 果 


8.1.2 ”有 序列 表 


有 序列 表 标 记 <ol> 可 以 创建 具有 顺序 的 列表 ， 如 每 条 信息 前 面 加 上 1、2、3 等 ， 如 果 要 改变 有 序列 表 
前 面 的 符号 ， 同 样 需要 使 用 list-style-type 属性 ， 只 是 属性 值 不 同 而 已 。 
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< 


有 序列 表 中 list-style-typed 的 一 些 属性 值 如 表 8-2 所 示 。 
表 8-2 有 序列 表 中 list-style-typed 的 一 些 属性 值 


属性 什 说 明 
ei 阿拉 伯 数 字 带 圆 点 
ed 小 写 罗马 数字 
i 大 写 罗马 数字 

小 写 英文 字母 


i 
upper-alpha 大 写 英文 字母 


不 使 用 项 目 符号 


【 例 8-2】〔 实 例文 件 ，cho8\Chap8.2.html》 有 序列 表 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title> 有 序列 表 </title> 


</head> 

<body> 

<ol> <!-- 创 建 有 序列 表 -> 
<1i> 窗 前 明月 光 ，</1i> <!-- 创 建 有 序列 表 项 目 --> 


<1i> 疑 是 地 上 霜 。 </1i> 
<1i> 举 头 望 明月 ，</1i> 
<1i> 低 头 因 故乡 。</1i> 

</ol> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap8.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 8-3 所 示 。 
可 以 设置 表 8-2 中 的 属性 值 来 改变 无 序列 表 的 默认 样式 ， 这 里 设置 属性 值 为 lower-alpha， 代 码 如 下 : 
<style> 
olf 
list-style: lower-alpha; /* 设 置 有 序列 表 的 样式 为 小 写 英文 字母 */ 


color: red; 
和 


</style> 
在 正 浏 览 器 中 运行 的 效果 如 图 8-4 所 示 。 
RE - oe ox a , 中 5 
© O [lomo rk © 0 [Domo rk 
1. 窗 前 明月 光 ， a. 窗 前 明月 光 ， 
2. 疑 是 地 上 霜 。 b. 疑 是 地 上 霜 。 
3. 举 头 望 明月 ， C. 举 头 望 明月 ， 
4. 低头 思 故 乡 。 d. 低头 思 故 乡 。 
图 8-3 有 序列 表 图 8-4 ”lower-alpha 属性 值 效果 
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8.1.3 自 定义 列表 


自 定义 列表 不 仅仅 是 一 列 项 目 ， 而 是 项 目 及 其 注释 的 组 合 。 


自 定义 列表 以 <dl> 标 签 开始 ，# 


【 例 8-3】 实例 文件 ，ch08\Chap8.3.html》 自 定义 列表 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 

</head> 

<body> 

<dl> 
<dt> 李 和 白 </dt> 
<dd> 飞 流 直下 三 千 尺 ，</dd> 


<!-- 创 建 自 定义 列表 --> 
<!-- 创 建 自 定义 列 表 项 目 --> 
<!-- 描 述 列表 中 的 项 目 --> 


第 贺 章 使 用 并 美化 网 页 列表 


每 个 自 定义 列表 项 以 <dt> 开 始 ， 每 个 自 定义 列表 项 的 定义 以 <dd> 开 始 。 


<dq> 疑 是 银河 落 九 天 。</dd> 
<dt> 杜 责 </dt> 
<dd> 读 书 破 万 卷 ，</dd> 
<dd> 下 笔 如 有 神 。</dd> 


</dl> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap8.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 8-5 所 示 。 


- OO x 
国 Gsers omiristrat D -上 
NE 
李白 
飞 流 直 下 三 干 尺 ， 
疑 是 银河 落 九 天 。 


读书 破 万 卷 ， 
下 笔 如 有 神 。 


R95% ~ 


8-5 自 定义 列表 


8.2 列表 的 常见 应 用 
列表 在 网 页 中 的 应 用 很 广泛 ， 如 导航 条 、 菜 单 栏 。 下 面 举 一 些 案例 来 介绍 。 


8.2.1 使 用 列表 实现 纵向 菜单 


列表 默认 状态 就 是 纵向 排列 的 ， 所 以 实现 纵向 菜单 很 简单 ， 这 里 只 需要 使 用 定位 属性 ， 把 列表 定位 到 
相应 的 位 置 便 可 以 实现 纵向 菜单 布局 。 
【 例 8-4】 实例 文件 ，ch08\Chap8.4.html)〉 列 表 实 现 纵 向 菜单 。 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title> 列 表 实 现 纵向 莱 单 </title> 
<style> 
div{ 
width: 70px; 
border-bottom: 3px solid 
ul{ 
list-style: none; 
position: absolute; 
left: 
top: 
} 
li{background: yellow;border 
</style> 
</head> 
<body> 
<div> 千 谷 科技 </div> 
<ul> 
<1i> 首 页 </1i> 
<1i> 公 司 介绍 </1i> 
<1i> 联 系 方式 </1i> 
<1i> 关 于 我 们 </1i> 
</ul> 
</body> 
</html> 


-30px; 
20px; 


( 超 值 版 ) 


black; 


/* 去 掉 列 表 默 认 的 符号 */ 
/* 设 置 列表 的 绝对 定位 */ 
/* 相 对 于 已 定位 的 父 级 元 素 向 左 移动 30 像素 */ 
/* 相 对 于 已 定位 的 父 级 元 素 向 下 移动 20 像素 */ 


: lpx solid blue;} 


相关 的 代码 实例 请 参考 Chap8.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 8-6 所 示 。 


© O | Iocanoss3342/# a 女 


干 谷 科技 


TR 


8.2.2 ”使 用 列表 实现 新 闻 列 表 


图 8-6 纵向 菜单 


用 列表 实现 新 闻 列 表 是 普遍 存在 的 ， 因 


为 用 列表 实现 起 来 很 方便 ， 不 需要 大 的 布局 改动 便 可 以 实现 。 


【 例 8-5】 实例 文件 ，ch08\Chap8.5.html)〉 列 表 实 现 新 闻 列表 。 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 新 闻 列 表 </title> 
<style> 
h2{color: red;} 
ul{list-style: square;} /* 设 置 列表 符号 样式 为 实心 的 小 正方 体 */ 
</style> 
</head> 
<body> 
<ul> 
<h2> 署 假 小 学 生 的 安排 情况 </h2> 
<li><a href="#">209% 学 习 乐 器 , 钢琴 、 吉 他 、 古 筝 等 </a></1i> 
<1i><a href="#">30% 补 习 下 学 期 要 学 的 课程 </a></1i> 
<li><a href="#">20% 报 了 体育 课程 , 乒乓 球 、 篮 球 、 足 球 </a></1i> 
<1li><a href="#">20% 学 习 计算 机 , "少儿 编程 "</a></1i> 
<1i><a href="#">10% 在 家 里 学 习 </a></1i> 


</ul> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap8.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 8-7 所 示 。 
站 加 0 x 
C OQ Dlocanostos34 /mY Ma hp Sh Fr 
署 假 小 学 生 的 安排 情况 
a 20% 学 习 者 


图 8-7 ”列表 实现 新 闻 列表 


8.2.3 ”使 用 列表 实现 图 片 的 排列 
使 用 list-style-image 属性 ， 可 以 将 列表 前 面 的 项 目 符号 替换 为 任意 的 图 片 。 代 码 如 下 ， 


list-style-image: url(a); 
其 中 a 表示 图 片 的 路 径 。 
【 例 8-6】 实例 文件 ，ch08\Chap8.6.html》 列 表 实 现 图 片 的 排列 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 列 表 实 现 图 片 排列 </title> 
<style> 
1i{ 
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list-style-image: url("06.png"); /* 使 用 图 像 来 替换 列表 项 的 标记 */ 
font-size: 30px7 
padding-left:15px; 
</style> 
</head> 
<body> 
<ul> 
<1i> 热 水 渤 让 人 失眠 尤其 是 这 三 个 时 间 点 </1i> 
<1i> 经 常 放屁 是 胃 有 问题 吗 医师 教 你 治 屁 </1i> 
<1i> 睡 前 只 要 抬 腿 15 分 钟 全 身 气 血 都 通 了 </1i> 
<1i> 醋 有 多 种 养生 方法 每 种 都 为 健康 加 分 </1i> 
<1i> 不 想 得 痛 症 调整 饮食 可 降低 患 痛风 险 </1i> 
</ul> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap8.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 8-8 所 示 。 


8 = 稀 
国 ?RA 列 x 


© 从 |@ localhost63342/ 状 三 /ch03/Chap85.. Q 安 | 3 


弹 热 水 澡 让 人 失眠 尤其 是 这 三 个 时 间 点 
弹 经 常 放屁 是 胃 有 问题 吗 医师 教 你 治 尼 
弹 睡 前 只 要 抬 腿 15 分 钟 全 身 气 血 都 通 了 
弹 醋 有 多 种 养生 方法 每 种 都 为 健康 加 分 
漳 不 想 得 癌症 调整 饮食 可 降低 患 癌 风 险 


图 8-8 列表 实现 图 片 的 排列 


8.3 设计 CSS 3 样式 美化 列表 


在 HTML 中， 系统 提供 的 列表 的 项 目 符号 比较 少 而 且 不 够 美观 ， 在 网 页 设计 中 常常 需要 自 定义 项 目 符 
号 来 使 网 页 更 美观 。 


31 自 定义 项 目 符号 
加 部 


这 里 把 一 个 <span> 标 签 设计 成 一 个 项 目 符号 ， 添 加 到 每 个 站 元 素 中 。 具 体 思路 ， 
在 每 个 二 元 素 中 添加 一 个 <span> 标 签 ， 去 掉 列 表 的 默认 符号 。 

分 别 给 二 和 span 添加 相对 定位 和 绝对 定位 。 

设置 span 的 CSS 样式 ， 调 整 位 置 。 

具体 的 实现 代码 ， 请 参考 下 面 案例 。 

【 例 8-7】〈 实 例文 件 ，ch08\Chap8.7.html》 自 定义 项 目 符号 。 


<!DOCTYPE html> 
<html> 
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相关 的 代码 实例 请 参考 Chap8.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 8-9 所 示 。 


图 8-9 自 定义 项 目 符号 一 


8.3.2 ”使 用 背景 图 片 设计 项 目 符号 
首先 使 用 liststyle-ype: none: 清 除 列表 自 带 的 项 目 符号 , 然后 给 每 个 正 设置 背景 图 片 ,并 调整 图 片 大 小 ， 


设置 图 片 不 平 铺 。 
【 例 8-8】 “〈 实 例文 件 ，chog\Chap8.8html) 使 用 背景 图 片 设计 项 目 符号 。 
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相关 的 代码 实例 请 参考 Chap8.8.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 8-10 所 示 。 


图 8-10 使 用 背景 图 片 设计 项 目 符号 


8.4 ”实践 案例 一 一 设计 排行 榜 


本 节 介 绍 了 列表 的 知识 ， 下 面 是 使 用 列表 相关 知识 实现 一 个 排行 榜 的 案例 。 


120 


第 贺 章 使 用 并 美化 网 页 列表 


排行 榜 一般 由 标题 和 排名 项 目 组 成 ， 在 下 面 的 案例 中 ， 使 用 其 中 一 个 列表 项 来 设计 标题 ， 使 用 剩 下 的 
列表 来 设计 排名 项 。 详 细 的 请 参考 案例 注释 以 及 代码 。 
【 例 8-9】 (实例 文件 ，ch08\Chap8.9.html) 设计 排行 榜 。 


相关 的 代码 实例 请 参考 Chap8.9.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 8-11 所 示 。 
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3 
@*x 


辣 cserspdrinisvatonDeskopNNM 亡 ” | 总 Tite 
文件 ”向 守 E) 豆 V) WA IRM Bs 


20S0 宠 物 全 i 行 榜 


但 资深 妖 妈 者 知道， 
同 的 陪伴 ， 也 感到 很 幸福 。 
人 缓解 视觉 疲劳 ， 美 化 环 


不 仅 静 心 养 服 ， 鱼 秘 蒸 
境 ， 多 从 要 要 让 的 村 和 要 沁 


RO% 


图 8-11 设计 排行 榜 


8.5 ”就 业 面试 技巧 与 解析 


8.5.1 ”面试 技巧 与 解析 (一) 


面试 官 ， CSS Sprites 有 什么 作用 ? 

应 聘 者 : CSS Sprites 是 精灵 图 ， 将 一 个 页 面 涉及 的 所 有 图 片 制作 成 一 张大 图 ， 然 后 利用 Css 的 
background-image、background- repeat 和 background-position 组 合 进行 背景 定位 。 利用 CSS Sprites 能 很 好 地 
减少 网 页 的 http 请 求 ， 从 而 大 大 提高 页 面 的 性 能 。 


8.5.2 面试 技巧 与 解析 (二 ) 


面试 官 : 在 项 目 开 发 中 ， 使 用 css reset 有 什么 作用 ? 

应 聘 者 : 当今 流行 的 浏览 器 中 ， 有 些 是 以 自己 的 方式 去 理解 CSS 规范 ， 这 就 会 遇 到 有 的 浏览 器 对 CSS 
的 解释 与 设计 师 的 CSS 定义 初衷 相 冲 突 ， 使 得 网 页 在 某 些 浏览 器 下 不 能 正确 按照 设计 师 的 想法 显示 。 所 以 
使 用 css reset 来 重 置 浏览 器 默认 的 样式 ， 然 后 再 统一 定义 ， 这 样 页 面 就 可 以 实现 相同 的 显示 效果 了 。 
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第 9 章 
使 用 并 美化 表格 


EP 学 习 指引 
HTML 中 表格 不 但 可 以 展示 数据 信息 , 还 可 以 用 于 页 面 布局 。 本章 将 向 读者 详细 介绍 表格 的 相关 知识 。 


NY 重点 导读 


。 掌 握 表 格 的 基本 结构 。 

。 掌 握 创 建 网 页 表格 的 方法 。 

。 掌 握 表格 边框 的 设置 方法 。 

。 掌 握 表 格 背景 的 设置 方法 。 
“掌握 表格 的 行 属性 。 

。 掌 握 单元 格 的 属性 。 

。 热 悉 使 用 CSS 样式 美化 表格 。 


9.1 表格 的 基本 结构 


简单 的 HTML 表格 由 table 元 素 以 及 一 个 或 多 个 <tr>、<th> 或 <td> 元 素 组 成 。<t> 元 素 定义 表 格 的 行 ， 
<th> 元 素 定义 表格 的 头 ，<td> 元 素 定 义 表 格 单元 格 。 更 复杂 的 HTML 表格 可 能 包括 caption、col、colgroup、 
thead、tfoot 及 tbody 等 元 素 。 


9.1.1 <table> 标 签 的 属性 


<table> 标 签 用 于 定义 表格 ，<table> 是 表格 的 开始 ，</table> 是 表格 的 结束 。<table> 标 签 的 属性 如 表 9-1 
所 示 。 


HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 


表 9-1 <table> 标 签 的 属性 
属 性 属性 什 说 明 

Ai Left、 center, right 定义 表格 相对 周转 元 素 的 对 齐 方式 
Be | sebGex), soooccr, colomame 定义 表格 的 背景 颜色 

border pixels 定义 表格 边框 的 宽度 

eli 定义 单元 格 之 间 的 空白 
cellpadding 定义 单元 边沿 与 其 内 容 之 间 的 空 和 
summary text 定义 表格 的 摘要 

width 定义 表格 的 宽度 


9.1.2 ”<tr> 标 签 的 属性 


<t> 标 签 定义 HTML 表格 中 的 行 。tr 元 素 包 含 一 个 或 多 个 也 或 td 元 素 。<t> 标 签 的 属性 如 表 9-2 所 示 。 
表 9-2 <tr> 标 签 的 属性 


| 
aa 


9.1.3 ”<td> 和 <th> 标 签 的 属性 


说 明 
定义 表格 行 的 内 容 对 齐 方式 
定义 表格 行 的 背景 颜色 
定义 根据 哪个 字符 来 进行 文本 对 齐 
定义 第 一 个 对 齐 字符 的 偏 移 量 
定义 表格 行 中 内 容 的 垂直 对 齐 方式 
定义 表格 的 行 的 高 度 


<td> 标 签 定义 HTML 表格 中 的 标准 单元 格 ，<th> 标 签 定义 表格 内 的 表 头 单元 格 。 也 元素 内 部 的 文本 通 
常会 呈现 为 居中 的 粗 体 文本 ， 而 td 元素 内 的 文本 通常 是 左 对 齐 的 普通 文本 。 


单元 格 的 属性 如 表 9-3 所 示 。 


表 9-3 <td> 和 <th> 标 签 的 属性 


DE text 定义 单元 格 中 内 容 的 缩写 版 本 
二 | ef right, center, justg、char 定义 单元 格 内 容 的 水 平 对 齐 方式 
本 | category_name 对 单元 进行 分 类 

| rtebGex), eocccx, colomame 定义 单元 格 的 背景 颜色 

本 | character 定义 根据 哪个 字符 来 进行 内 容 的 对 齐 
charoff | mumiber 定义 对 齐 字符 的 偏 移 量 


124 


第 贺 章 使 用 并 美化 表格 


续 表 
属 性 属性 值 说 明 
colspan Number 定义 单元 格 可 横 跨 的 列 数 
headers header cells' id 定义 与 单元 格 相关 的 表 头 
height pixels 定义 表格 单元 格 的 高 度 
nowrap nowrap 定义 单元 格 可 横 跨 的 行 数 
rowspan number 定义 将 表 头 数据 与 单元 数据 相关 联 的 方法 
scope col、colgroup、row、rowgroup 定义 单元 格 内 容 的 垂直 排列 方式 
valign top、middle、bottom、baseline 定义 表格 的 垂直 对 齐 方式 
width pixels、 百 分 比 定义 表格 单元 格 的 宽度 


9.2 ”创建 网 页 表格 


表格 由 行 与 列 构成 ， 中 间 有 若干 个 单元 格 。 在 过 去 ， 表 格 可 用 来 设计 网 页 的 布局 ， 现 在 更 多 是 容纳 文 
本 数据 。 下 面 就 来 创建 表格 。 


9.2.1 创建 普通 表格 


如 创建 一 个 普通 的 3 行 3 列 的 表格 ， 具 体 代码 如 下 。 
【 例 9-1】 《实例 文件 ，ch09\Chap9.1.html) 创建 普通 表格 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> </title> 
</head> 
<body> 
<table border="1"> <!-- 定 义 表格 ,设置 边框 为 1--> 
<tr> <!-- 定 义 表格 的 行 --> 
<td> 小 明 </td> <!-- 定 义 表格 的 单元 格 --> 
<td> 经 理 </td> 
<td>50000 元 </td> 
</tr> 
<tr> 
<td> 小 红 </td> 
<td> 秘 书 </td> 
<td>10000 元 </td> 
</tr> 
<tr> 
<td> 小 华 </td> 
<td> 职 员 </td> 
<td>5000 元 </td> 
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相关 的 代码 实例 请 参考 Chap9.1.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-1 所 示 。 


;9.2.2 ”创建 包含 表 头 的 表格 


<th> 标 签 用 于 定义 表格 内 的 表 头 单元 格 ， 字 体 呈 加 粗 居 中 的 效果 。 
【 例 9-2】 实例 文件 ，ch09\Chap9.2.html》 创 建 包 含 表 头 的 表格 。 
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相关 的 代码 实例 请 参考 Chap9.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-2 所 示 。 


图 9-2 ep 
9.2.3 创建 包含 标题 的 表格 


在 <table> 中 ，<caption> 标 签 用 于 定义 表格 的 标题 。 
【 例 9-3】 实例 文件 ，ch09\Chap9.3.html) 创 建 包 含 标题 的 表格 。 
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相关 的 代码 实例 请 参考 Chap9.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-3 所 示 。 


.2.4 创建 没有 边框 的 表格 


使 用 border 属性 可 以 定义 表格 的 边框 类 型 ， 设 置 边 框 的 属性 为 0 时 ， 可 以 创建 没有 边框 的 表格 。 
【 例 9-4】 《实例 文件 ，ch09\Chap9.4.html) 创建 没有 边框 的 表格 。 


相关 的 代码 实例 请 参考 Chap9.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-4 所 示 。 
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9.2.5 创建 含有 跨行 、 列 单元 格 的 表格 


在 <table> 中 ， 可 以 使 用 colspan 和 rowspan 属性 来 创建 跨行 跨 列 的 表格 。 
【 例 9-5】 (实例 文件 ,ch09\Chap9.5.html) 创建 含有 跨行 、 列 单元 格 的 表格 。 


相关 的 代码 实例 请 参考 Chap9.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-5 所 示 。 
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- 0 x 
(OB Do 


跨行 一 | 下 


图 9-5 创建 跨行 、 列 单元 格 的 表格 
;9.2.6 创建 含有 内 嵌 标 签 元 素 的 表格 


为 了 需要 ， 表 格 中 还 可 以 添加 一 些 其 他 的 标签 元 素 ， 如 下 面 案例 中 ， 在 表格 中 插入 了 img 标签 。 
【 例 9-6】 (实例 文件 ，ch09\Chap9.6.html) 创建 含有 内 嵌 标 签 元 素 的 表格 。 
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相关 的 代码 实例 请 参考 Chap9.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-6 所 示 。 


图 9-6 创建 含有 内 岩 标 签 元 素 的 表格 


9.3 ”表格 的 边框 
可 以 通过 设置 border 属性 来 改变 表格 边 村 的 样式 。 


9.3.1 设置 表格 边框 宽度 


通过 设置 border 属性 值 的 大 小 来 改变 表格 边框 的 宽度 。 
【 例 9-7】 (实例 文件 ，ch09\Chap9.7.html) 设置 表格 边框 宽度 。 
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( 


相关 的 代码 实例 请 参考 Chap9.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-7 所 示 。 


9-7 设置 表格 边框 宽度 


.3.2 设置 表格 边框 颜色 


通过 设置 bordercolor 属性 来 改变 表格 边框 的 颜色 。 
【 例 9-8】 (〈 实 例文 件 ，cho9\Chap9.8.html) 设置 表格 边框 颜色 。 
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相关 的 代码 实例 请 参考 Chap9.8 html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-8 所 示 。 


9.3.3 设置 <td> 之 间 的 间距 


在 <table> 中 通过 设置 cellspacing 属性 来 改变 <td> 之 间 的 距离 。 
【 例 9-9】 实例 文件 ，ch09\Chap9.9.html》 设置 <td> 之 间 的 距离 。 
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相关 的 代码 实例 请 参考 Chap9.9.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-9 所 示 。 


图 9.9 设置 <td> 之 间 的 距离 


9.3.4 设置 表格 内 文字 与 <td> 的 间距 


在 <table> 中 通过 设置 cellpadding 属性 来 改变 文字 与 <td> 的 间距 。 
【 例 9-10】 实例 文件 ，ch09\Chap9.10.html) 设置 表格 内 文字 与 <td> 的 间距 。 
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相关 的 代码 实例 请 参考 Chap9.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-10 所 示 。 


- DO x 
司 cG\userswdminisrat P - 上 三 
文件 (站 ” 状 坊 (E) 。 坦 看 (V) 。 改 芒 去 (工具 ) ” 


筷 100% 


图 9-10 设置 表格 内 文字 与 <td> 的 间距 


9.4 表格 背景 
为 了 使 表格 看 上 去 更 美观 ， 可 以 设置 表格 的 背景 ， 如 设置 背景 颜色 、 背 景 图 片 等 


9.4.1 设置 表格 背景 颜色 


在 <table> 中 通过 设置 bgcolor 属性 来 设置 表格 的 背景 颜色 。 
【 例 9-11】 实例 文件 ，ch09\Chap9.11.html)》 设置 表格 背景 颜色 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 表 格 的 背景 颜色 </title> 
</head> 
<body> 
<table border="1" bgcolor="green"> <! 一 设置 表格 的 背景 颜色 为 绿色 -> 
<caption> 员 工 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 职 位 </th> 
<th> 薪 资 </th> 
</tr> 
<tr> 
<td> 小 明 </td> 
<td> 经 理 </td> 
<td>50000 元 </td> 
</tr> 
<tr> 
<td> 小 红 </td> 
<td> 秘 书 </td> 
<td>10000 元 </td> 
</tr> 
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<tr> 
<td> 小 华 </td> 
<td> 职 员 </td> 
<td>5000 元 </td> 

</tr> 

</table> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap9.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-11 所 示 。 


= 口 x 
司 ] CNUserswdministrat P 
文件 (月 ” 妨 编 (E) 
员工 表 


查看 (V) 收藏 夫 (Al 


戌 100% > 


图 9-11 设置 表格 背景 颜色 


设置 表格 背景 
background 属性 用 来 设置 表格 的 背景 图 。 


【 例 9-12】 实例 文件 ，ch09\Chap9.12.html) 设置 表格 背景 图 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 表 格 的 背景 图 像 </title> 
<style> 
table{ 
background-size:200px 200px7 
color: white; 
E 
</style> 
</head> 
<body> 
<table border="1" background="04.jpg"> 
<caption> 员 工 表 </caption> 
<tr> 
<th> 姓 名 </th> 
<th> 职 位 </th> 
<th> 薪 资 </th> 
</tr> 
<tr> 
<td> 小 明 </td> 
<td> 经 理 </td> 
<td>50000 元 </td> 
</tr> 
<tr> 


/*# 设 置 背景 图 的 大 小 */ 
/* 设 置 表格 的 字体 颜色 * 


<!-- 设 置 表格 的 背景 图 -一 > 
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相关 的 代码 实例 请 参考 Chap9.12.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-12 所 示 。 


图 9-12 设置 表格 背景 图 


9.5 ”表格 的 行 属性 
在 前 面 已 经 简单 介绍 了 表格 中 行 (u) 的 属性 ， 下 面 就 来 具体 介绍 一 下 表格 的 行 属性 。 


9.5.1 设置 表格 的 行 高 


在 <tr> 标 签 中 ， 可 以 通过 设置 height 属性 来 改变 行 的 高 度 。 
【 例 9-13】 (实例 文件 ，ch09\Chap9.13.html) 设置 表格 的 行 高 。 
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</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.13.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-13 所 示 。 


全 本 六 
站 CUsersAdministrat PD» © 
文件 (六 纺 (E) 二 看 V) 收藏 交 (A)。 工具” 


二 | 一 设置 行 高 为 150 
设置 表格 的 行 高 | 


95% 


9-13 ”设置 表格 的 行 高 


设置 边框 颜色 


上 面 介绍 过 ， 使 用 bordercolor 属性 来 设置 <table> 标 签 的 边框 颜色 ，<tr> 标 签 与 它 一 样 ， 也 是 通过 设置 
bordercolor 属性 来 设置 <u> 的 边框 颜色 。 
【 例 9-14】》〔 实 例文 件 ，cho9\Chap9.14.html) 设置 边框 的 颜色 。 


<!DocTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 

</head> 

<body> 

<table border="1"> 


<!-- 设 置 行 边框 颜色 --> 


<tr bordercolor="gold"> <! 一 设置 行 的 边框 颜色 --> 
<td> 设 置 表格 的 行 属性 </td> 
</tr> 
<tr> 
<td> 设 置 表 格 的 行 属性 </td> 
</tr> 
</table> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.14.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-14 所 示 。 


- OO x 
加 CNuserswdministrat PD ~ O 
文件 月。 六 纺 (E) 下 看 (V) 收 京 夫 A 工具“ 


性 | 


设置 表格 的 行 属性 


一 120%6 ~ 


图 9-14 设置 边框 的 颜色 
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9.5.3 ”设置 行 背景 颜色 


与 <table> 一 样 ， 行 的 背景 色 也 是 使 用 bgcolor 属性 来 设置 。 
【 例 9-15】 (实例 文件 ，ch09\Chap9.15.html) 设置 表格 中 行 的 背景 颜色 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<table border="1"> 
<tr bgcolor="yellow"> <!-- 设 置 行 背景 颜色 --> 
<td> 设 置 表格 的 行 属性 </td> 
</tr> 
<tr> 
<td> 设 置 表格 的 行 属性 </td> 
</tr> 
</table> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap9.15.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-15 所 示 。 


三 带头 
由 avsersAdmiristrat P - O 
文人 中 四 二 看 | 收 庆 拓 Al 工具 
| 


设置 表格 的 行 属性 | 


由 120% ~ 


图 9-15 设置 行 背景 颜色 


9.5.4 设置 行文 字 的 水 平 对 齐 方式 


align 属性 用 于 设置 行文 字 的 水 平 对 齐 方式 ， 具 体 的 属性 如 表 9-2 所 示 。 
【 例 9-16】 实例 文件 ，ch09\Chap9.16.html) 设置 表格 中 行文 字 的 水 平 对 齐 方式 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<table border="1" width="300"> 
<tr align="left"> <!-- 设 置 行文 字 左 对 齐 一 > 
<td> 设 置 表格 的 行 属性 </td> 
</tr> 
<tr align="center"> <!-- 设 置 行文 字 水 平 居中 对 齐 --> 
<td> 设 置 表格 的 行 属 性 </td> 
</tr> 
<tr align="right"> <! 一 -设置 行文 字 右 对 齐 --> 
<td> 设 置 表格 的 行 属性 </td> 
</tr> 
</table> 
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> 


</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.16.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-16 所 示 。 


忻 ciuewewdnmiees 记 -| BCU 
文中 油 E 这 硬 V) 家 夫人 工 R 者 二 


9-16 ”设置 行文 字 的 水 平 对 齐 方式 


时 和 。5.5 设置 行文 字 的 委 直 对 弄 方式 


valign 属性 用 于 设置 行文 字 的 垂直 对 齐 方式 ， 具 体 属性 如 表 9-2 所 示 。 
【 例 9-17】〗 (实例 文件 ，ch09\Chap9.17.html) 设置 表格 中 行文 字 的 垂直 对 齐 方式 。 


<!DocTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title></title> 

</head> 

<body> 

<table border="1" height="300"> 
<tr valign="top"> <!-- 设 置 行文 字 顶 部 对 齐 --> 

<td> 设 置 表格 的 行 属性 </td> 

</tr> 


<tr valign="middle"> <!-- 设 置 行文 字 垂直 居中 对 齐 --> 
<td> 设 置 表格 的 行 属性 </td> 


</tr> 
<tr valign="bottom"> <!-- 设 置 行文 字 底部 对 齐 --> 
<td> 设 置 表 格 的 行 属性 </td> 
</tr> 
</table> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.17.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-17 所 示 。 


= 风 % 
国 clucereVdminictrst PO 二 cuserawdnl 
六 林强 。 考 理 W 点 下 二 内 工具 大 区 HI) 


要 后 下 S 示 


设置 表格 的 行 属性 | 


R100% 


9-17 ”设置 行文 字 的 垂直 对 齐 方 式 
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9.6 单元 格 属性 


在 前 面 也 已 经 简单 介绍 了 单元 格 td) 的 属性 ， 下 面 就 来 具体 地 介绍 一 下 表格 的 行 属性 。 


9.6.1 设置 单元 格 的 宽度 和 高 度 


对 于 <td> 标 签 中 width 和 height 的 设置 一 定 要 注意 ， 具 体 如 下 : 

width: 某 一 个 <td> 标 签 的 width 和 它 所 处 的 一 列 中 的 每 个 <td> 的 width 都 相关 ， 取 其 中 最 大 的 width 作 
为 这 一 列 中 每 个 <td> 的 width。 

height， 某 一 个 <td> 标 签 的 height 和 它 所 处 的 一 整 行 的 每 个 <td> 的 height 都 有 关 ， 取 其 中 最 大 的 height 
作为 这 一 列 中 每 个 <td> 的 height。 

这 是 设置 单元 格 大 小 width、height 中 最 容易 混淆 的 ， 一 定 要 从 全 局 把 握 <td> 的 width、height。 

【 例 9-18】 (实例 文件 ，ch09\Chap9.18.html) 单元 格 的 width 和 height。 


<!DocTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 

<title></title> 
</head> 
<body> 
<table border="1"> 

<tr> 

<td width="400" height="100"> 设 置 表格 的 单元 格 属性 </td> 


<td width="200"> 设 置 表格 的 单元 格 属性 </ta> 


</tr> 
<tI> 
<td height="150"> 设 置 表格 的 单元 格 属性 </td> 
<td> 设 置 表格 的 单元 格 属性 </td> 
</tr> 
<tr> 
<td height="50"> 设 置 表格 的 单元 格 属性 </td> 
<td> 设 置 表格 的 单元 格 属性 </ta> 
</tr> 
</table> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap9.18.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-18 所 示 。 
a 
司 cueerswdminiratorpDe P ~ © BseAdministaton, 3 二 
KAN RE] BEV CBN IRM Re 
| 
1 党 表格 的 音 元 格 层 性 设置 表格 的 单元 格 层 性 
i 设置 表格 的 单元 格 后 性 设置 去 格 的 单元 格 后 性 
| 设 豆 表格 的 单元 属 必 性 | 设 豆 表 格 的 单元 属 层 性 | 


图 9-18 设置 单元 格 的 宽度 和 高 度 
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9.6.2 设置 单元 格 的 对 齐 方式 


单元 格 的 对 齐 方式 是 使 用 align 和 valign 属性 来 设置 ， 具 体 的 属性 值 如 表 9-3 所 示 。 
【 例 9-19】 (实例 文件 ，ch09\Chap9.19.html) 设置 单元 格 的 对 齐 方式 。 


相关 的 代码 实例 请 参考 Chap9.19.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-19 所 示 。 


全 [| x 
| 避 cNuserswdminisratorcx | 信安 总 回 


属 村 表格 的 单元 格 属性 


图 9-19 设置 单元 格 的 对 齐 方式 
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9.6.3 设置 单元 格 的 背景 色 


单元 格 背 景色 的 设置 与 <table>、<tr> 的 设置 一 样 ， 使 用 bgcolor 属性 来 设置 。 
【 例 9-20】 实例 文件 ，ch09\Chap9.20.html) 设置 单元 格 的 背景 色 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td bgcolor="#BFEFFF"> 设 置 表格 的 单元 格 属性 </td> <!-- 设 置 单元 格 的 背景 色 --> 
</tr> 
<tr> 
<td bgcolor="#90EE90"> 设 置 表格 的 单元 格 属性 </td> 
</tr> 
</table> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.20.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-20 所 示 。 
口 x 

司 CNWuUserswdministrat 万- 0 

XH) WU EV MaxA Il”| 


受 于 表 和 的 单元 格 属性 


下 100% ~ 


图 9-20 设置 单元 格 的 背景 色 


9.6.4 设置 单元 格 的 边框 颜色 


单元 格 边框 颜色 的 设置 与 <table> 一 样 ， 也 是 使 用 bordercolor 属性 来 设置 。 
【 例 9-21】 实例 文件 ，ch09\Chap9.21.html) 设置 单元 格 的 边框 颜色 。 
<!DOCTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td bordercolor="red"> 设 置 表格 的 单元 格 属性 </ta> <!-- 设 置 单 元 格 的 边框 颜色 --> 
</tr> 
<tr> 
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<td bordercolor="gold"> 设 置 表格 的 单元 格 属性 </td> 


</tr> 
</table> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap9.21.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-21 所 示 。 


二 而 二 . 训 
个 CAUsersAdministrat PD ~ © | @ CAUsers\Administra..| 
文件 (F) 妨 坊 (E) 查看 (V) 收藏 天 (A) 工具 (T) 大 动 (H) 


设置 表格 的 单元 格 属性 
设置 表格 的 单元 格 属性 


壬 170% ~ 


9-21 设置 单元 格 的 边框 颜色 


9.6.5 ”设置 单元 格 的 亮 边框 和 暗 边框 


bordercolorlight 属性 用 于 定义 亮 边 框 ，bordercolordark 属性 用 于 定义 暗 边框 。 亮 边框 和 上 暗 边框 并 不 是 字 
面 意思 ,一般 是 针对 表格 的 (包括 表格 中 的 行 和 单元 格 )， 表 格 的 边框 默认 都 有 4 个 边框 ， 其 中 亮 边 框 属性 
设置 的 一 般 是 左边 框 、 上 边框 , 瞳 边 框 属性 设置 的 是 下 边框 、 右 边框 。 要 说 明 的 是 , 必须 在 正 浏览 器 浏览 。 
代码 如 下 : 


<td bordercolorlight=" 亮 边框 的 颜色 "></td> 
<td bordercolordark=" 暗 边框 的 颜色 "></td> 


【 例 9-22】 实例 文件 ，ch0o9\Chap9.22.html) 设置 单元 格 的 亮 边 框 和 上 暗 边 框 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<!--Bordercolorlight 设置 亮 边框 颜色 bordercolordark 设置 暗 边 框 颜色 --> 
<td bordercolorlight="red" bordercolordark="gold"> 设 置 表格 的 单元 格 属性 </td> 
</tr> 
<tr> 
<td bordercolorlight="red" bordercolordark="gold"> 设 置 表格 的 单元 格 属性 </td> 
</tr> 
</table> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.22.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-22 所 示 。 
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= 四 x 
装 GUsersWdministrat P- 6| 三 cNuseswdminse 


图 9-22 设置 单元 格 的 亮 边 框 和 暗 边框 


9.6.6 ”设置 单元 格 的 背 


设置 单元 格 背 景 图 和 <table> 一 样 ， 使 用 background 属性 来 设置 即 可 。 
【 例 9-23】 (实例 文件 ， ch09\Chap9.23.html) 设置 单元 格 的 背景 图 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
</head> 
<body> 
<table border="1"> 
<tr> 
<td background="01.png"> 设 置 表格 的 单元 格 属性 </td> <!-- 设 置 单元 格 的 背景 图 -> 
</tr> 
<tr> 
<td> 设 置 表格 的 单元 格 属性 </td> 
</tr> 
</table> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.23.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-23 所 示 。 
= 0 x 


司 CNuserswdministat P - © | 大 CUsersAdmin| 
-RD 和 


获 置 表格 的 单元 格 局 性 | 
攻守 委 稳 的 香 元 梧 属 企 


下 180% ~ 


图 9-23 设置 单元 格 的 背景 图 


9.7 使 用 CSS 样式 美化 表格 


9.7.1 设置 细 线 表格 
我 们 在 给 表格 设置 border="1" 和 cellspacing="0" 后 ， 在 页 面 中 显示 的 效果 是 边框 的 宽度 为 2px， 这 
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样 会 显得 页 面 不 是 很 美观 。 
可 以 使 用 border-collapse 属性 并 设置 属性 值 为 collapse， 来 实现 细 线 表格 ， 具 体 请 看 下 面 的 案例 。 
【 例 9-24】 (实例 文件 ，cho9\Chap9.24.html) 设计 细 线 表格 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
table { 
/*border-collapse 属性 设置 表格 的 边框 是 否 被 合并 为 一 个 单一 的 边框 ,还 是 像 在 标准 的 HTML 中 那样 分 开 显示 。*/ 
border-collapse: collapse; 
border-left: lpx solid #438820; 
border-top: lpx solid #438820; 
3 
th, tdl{ 
border-right: 0.5px solid #e63b57; 
border-bottom: lpx solid #e63b57; 
padding: 5px 15px; 
| 
</style> 
</head> 
<body> 
<table> 
<tr> 
<td> 设 计 细 线 表格 </td> 
<td> 设 计 细 线 表格 </td> 
<td> 设 计 细 线 表格 </td> 
</tr> 
<tr> 
<td> 设 计 细 线 表 格 </td> 
<td> 设 计 细 线 表格 </td> 
<td> 设 计 细 线 表格 </td> 
</tr> 
</table> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.24.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-24 所 示 。 


i 口 x 
加 cNuserewdminictratowpecle D ~ | 感 cNuserawdminstretor。x | ® 
文件 (篇 号 (E) 宣 看 (V)】 ”收藏 天 (Al 工具 (D) 大 动 (H) 


| 设计 细 线 表格 | 设计 细 线 表格 | 设计 绍 线 表格 | 
| 设计 细 线 表格 | 设计 细 线 表格 | 设计 细 线 表格 | 


到 170%6 ~ 


图 9-24 设置 细 线 表格 


9 .7.2 ”设置 表格 标题 的 样式 


一 个 出 色 的 表格 标题 ， 能 吸引 很 多 人 的 目光 ， 下 面 就 来 设置 一 下 表格 中 标题 的 样式 。 
【 例 9-25】 实例 文件 ，ch09\Chap9.25.html》 定 义 表格 标题 样式 。 
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<!DOCTYPE html> 
<html> 
<head> 

<meta charset="UTF-8"> 


<title> 包 含 标题 的 表格 </title> 


<style> 
table{ 
background: #00E1F3; /* 设 置 表 格 的 背景 颜色 */ 
} 
caption{ 
background: #00FF00; /* 设 置 标题 的 背景 颜色 */ 


border: lpx solid #0d0d0f; 
color: #fff; 
font-size: 30px; 


border-radius: 30px 30px 0 0; /* 设 置 标题 的 圆 角 边框 */ 
} 
</style> 
</head> 
<body> 


<table border="1" cellpaddinm 
<caption> 员 工 表 </caption> 
<tr> 
<td> 小 红 </td> 
<td> 秘 书 </td> 
<td>10000 元 </td> 
</tr> 
<tr> 
<td> 小 华 </td> 
<td> 职 员 </td> 
<td>5000 元 </td> 
</tr> 
</table> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.25.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-25 所 示 。 


司 cvuserrAdmnisra P - 上 | 各 cNusd 


文 作 了 六 雹 E) 吾 看 V)。 履 意 次 A) 工具 Tm 寺 助 


或 105% ~ 


图 9-25 设置 表格 标题 的 样式 
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9.8 ”实践 案例 


9.8.1 ”设置 隔行 换 色 表格 


在 HTML 中 ， 常 用 表格 显示 数据 。 表 格 的 每 一 行 交替 使 用 两 种 颜色 ， 使 得 表格 数据 更 易 观察 。CSS 3 
的 nth-child0 选 择 器 , 可 以 用 来 设计 隔行 换 色 的 表格 。:nth-child(n) 选 择 器 匹配 属于 其 父 元 素 的 第 n 个 子 元 素 ， 
不 论 元 素 的 类 型 ，n 可 以 是 数字 、 关 键 词 或 公式 。 

在 下 面 案例 中 ， 使 用 nth-child(2n) 来 选择 表格 的 偶数 行 ， 用 nth-child(2n+1) 选 择 表格 的 基数 行 。 

【 例 9-26】 实例 文件 ，cho9\Chap9.26.html) 设计 隔行 换 色 表格 。 


相关 的 代码 实例 请 参考 Chap9.26.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-26 所 示 。 
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回 后 5sE x 
避 合 |OIocalhos- 图 妇 


9-26 ”设置 隔行 换 色 表格 


9.8.2 设置 日 历 表 


<table> 其 实 越 来 越 不 被 大 家 使 用 ， 现 在 大 都 采用 DIV 来 设计 网 页 。 但 有 时 做 一 些 页 面 的 效果 的 时 候 ， 
使 用 表格 设置 效果 很 好 。 下 面 就 用 <table> 来 设置 一 个 日 历 。 
【 例 9-27】〗 (实例 文件 ，cho9\Chap9.27.html) 设计 日 历 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> 日 历 </title> 
<style> 
div{ 
border: lpx solid #00BFFF; 
width: 270px; 


table{margin: auto;} 
td,th{text-align: center} 


td{background:#FFFOFS; } /* 设 置 单元 格 的 背景 颜色 */ 
th, caption{background:#00BFFF;} /* 设 置 标题 和 表 头 的 背景 颜色 */ 
</style> 
</head> 
<body> 


<div> 
<table cellspacing="0" cellpadding="10" border="0"> 
<caption>2018 年 7 月 </caption> 
<tr> 
<th> 日 </th><th> 一 </th><th> 二 </th><th> 三 </th><th> 四 </th><th> 五 </th><th> 六 </th> 
</tr> 
<tr> 
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr> 
<tr> 
<td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td> 
</tr> 
<tr> 
<td>15</td><td>16</td><td>17</td><td>18</td><td>19</td><td>20</td><td>21</td> 
</tr> 
<tr> 
<td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td> 
</tr> 
<tr> 
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SS 


<td>29</td><td>30</td><td>31</td> 


</tr> 
</table> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap9.27.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 9-27 所 示 。 


8 -a 


4 5 6 
8 1137 MW 
15: 6 7 作 二 2 2 | 


25 26 27 


图 9-27 设置 日 历 表 


9.9 ”就 业 面试 技巧 与 解析 


9.9.1 面试 技巧 与 解析 (一) 


面试 官 : 为 什么 现在 开发 很 少 使 用 table 布局 ? 
应 聘 者 : 由 于 HTML 中 的 table 标签 浏览 速度 较 慢 ， 所 以 ， 使 用 嵌 套 表格 的 方法 来 布局 网 页 框架 会 使 


网 页 浏览 的 速度 变 慢 。 


应 ， 所 以 有 可 能 会 出 现 一 断 时间 空 白 然后 才 显 示 ， 这 是 不 使 用 table 布局 的 最 


9.9.2 ”面试 技巧 与 解析 (二 ) 
面试 官 : 你 常用 哪 几 种 浏览 器 测试 网 页 ? 它们 是 什么 内 核 (Layout Engine》 的 ? 


应 聘 者 : 我 常用 正 、Chrome、Firefox、Safari 和 Opera 等 浏览 器 。 


正 浏览 器 内 核 ， Trident 内 核 ， 也 是 俗称 的 正 内 核 。 
Chrome 浏览 器 内 核 : Chrome 内 核 ， 以 前 是 Webkit 内 核 ， 现 在 是 Blink 内 核 。 
Firefox 浏览 器 内 核 ，Gecko 内 核 ， 俗 称 Firefox 内 核 。 


Safari 浏览 器 内 核 : Webkit 内 核 。 


© 0 | orors1H0 /FE 7 A 


要 的 原 


因为 table 中 的 内 容 是 自 适应 的 ， 为 了 自 适应 ， 它 要 计算 嵌 套 最 深 的 节点 以 满足 自 适 


之 一 。 


Opera 浏览 器 内 核 : 最 初 是 自己 的 Presto 内 核 ， 后 来 是 Webkit 内 核 ， 现 在 是 Blink 内 核 。 
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第 10 章 
使 用 并 美化 表单 


二 学 习 指引 


在 网 页 中 ， 表 单 的 作用 是 比较 重 的 ， 主 要 用 于 获取 浏览 着 的 相关 信息 ， 如 登录 和 注册 信息 。 本 章 将 介 
绍 表单 的 使 用 以 及 使 用 CSS 来 美化 表单 。 


”重点 导读 


。 热 悉 表单 的 基本 结构 。 

。 掌 握 表单 及 表单 控件 。 

"掌握 HTML 5 新 增 的 表单 元 素 。 
。 掌 握 HITML 5 新 增 的 表单 属性 。 
。 掌 担 HTML 5 新 增 的 客户 端 校 验 。 


10.1 表单 的 基本 结构 


一 个 表单 有 3 个 基本 组 成 部 分 : 

(1) 表单 标签 ， <form> 标 签 包含 所 有 的 表单 对 象 ， 并 定义 了 提交 表单 数据 的 各 种 属性 。 

(2) 表单 域 ， 包含 了 文本 框 、 密 码 框 、 隐 藏 域 、 多 行文 本 框 、 复 选 框 、 单 选 按钮 、 下 拉 列 表 框 和 文件 
上 传 框 等 ， 作 用 是 用 来 采集 信息 或 者 选择 数据 。 

(3) 表单 按钮 。 如 提交 按钮 、 注 册 按 钮 和 重 置 按钮 等 ， 用 于 将 数据 传送 到 服务 器 。 还 可 以 用 表单 按钮 
来 控制 其 他 定义 了 处 理 脚本 的 处 理工 作 。 

表单 的 基本 结构 如 图 10-1 所 示 。 


<form action="get> 
表单 标签 -| 


</fom> 


图 10-1 表单 的 基本 结构 


a 
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10.2 ”表单 及 表单 控件 


HTML 5 保留 了 HTML 原 有 的 表单 以 及 表单 控件 ， 并 对 它们 进行 了 加 强 。 本 节 先 来 介绍 原 有 的 表单 及 
表单 控件 。 


10.2.1 表单 form 标签 


<form> 标 签 用 来 定义 表单 ， 在 表单 中 可 以 插入 相应 的 表单 元 素 。 在 表单 的 form 标签 中 可 以 设置 表单 的 基 
本 属性 , 包括 表单 的 名 称 、 处 理 程序 和 传送 方式 等 。 一 般 情况 下 , 表单 的 处 理 程序 action 属性 和 传送 方法 method 
属性 是 必 不 可 少 的 参数 。action 属性 用 于 指定 表单 数据 提交 到 哪个 地 址 进行 处 理 ，name 属性 用 于 给 表单 命名 。 


10.2.2 ”表单 input 标签 


<input> 标 签 是 表单 控件 元 素 中 功能 最 丰富 的 ， 主 要 用 于 搜集 用 户 信息 。 根 据 不 同 的 type 属性 值 ， 输 入 
字段 拥有 很 多 种 形式 。 输 入 字段 可 以 是 文本 字段 、 复 选 框 、 掩 码 后 的 文本 控件 、 单 选 按钮 、 按 钮 等 ， 如 下 
面 的 一 些 不 同 type 属性 值 的 input 标签 。 

单行 文本 框 : <input type="text">。 

密码 输入 框 ，<input type="password">。 

隐藏 域 ，<input type="hidden">。 

单 选 按钮 : <input type="radio"> 。 

复 选 框 ，<input type="checkbox"> 。 


国史 {| 
10.2.3 ”使 用 label 定义 标签 
党 


<label> 标 签 为 input 元 素 定义 标注 。label 元 素 不 会 向 用 户 呈 现任 何 特殊 效果 ， 它 为 鼠标 用 户 改进 了 可 
用 性 。 如 果 在 label 元 素 内 点 击 文本 ， 就 会 触发 此 控件 。 就 是 说 ， 当 用 户 选 择 该 标签 时 ， 浏 览 器 会 自动 将 焦点 
转 到 和 标签 相关 的 表单 控件 上 。<label> 标 签 的 for 属性 应 当 与 相关 元 素 的 id 属性 相同 ， 如 下 面 代码 所 示 。 


<form> 
<label for="a"> 用 户 名 : </label> 


<input type="text" name="sex" id="a" /> 

<br/> 

<label for="b"> 注 册 : </label> 

<input type="password" name="sex" id="b"/> 
</form> 


当 单 击 用 户 名 或 者 是 注册 时 ， 对 应 的 文本 框 获得 焦点 ， 在 正 浏览 器 中 显示 效果 如 图 10-2 所 示 。 


司 cwueervdririwa 衣 -CE 要 Te 
REN NED EM tN IRT Wt 


用 记名 : 下 
注册 : 


le 


10-2 ”获得 焦点 
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10.2.4 使 用 button 定义 按钮 


button 元 素 用 于 定义 按钮 ， 在 button 元 素 内 部 可 以 放置 内 容 ， 如 文本 或 图 像 ， 这 是 该 元 素 与 使 用 input 
元 素 创 建 的 按钮 之 间 的 不 同 之 处 。 

<button> 控 件 与 <input type="button"> 相 比 ， 提 供 了 更 为 强大 的 功能 和 更 丰富 的 内 容 。<button> 与 
</button> 标 签 之 间 的 所 有 内 容 都 是 按钮 的 内 容 ， 其 中 包括 任何 可 接受 的 正文 内 容 ， 如 文本 或 多 媒体 内 容 。 
例如 ， 可 以 在 按钮 中 包括 一 个 图 像 和 相关 的 文本 ， 用 它们 在 按钮 中 创建 一 个 吸引 人 的 图 像 。 它 包含 的 属性 
如 表 10-1 所 示 。 


表 10-1 button 按钮 的 属性 


属 性 说 明 
name 定义 按钮 的 名 称 
type 定义 按钮 类 型 ， 只 能 是 button、reset 或 者 submit 中 的 一 个 
value 定义 按钮 的 初始 值 
disabled 定义 是 否 禁 用 此 按钮 


10.2.5 ”使 用 <select> 和 <option> 标 签 


<select> 用 于 创建 单 选 或 多 选 菜 单 ， 其 是 一 种 表单 控件 ， 可 用 于 在 表单 中 接受 用 户 的 输入 。 

<option> 标 签 用 于 定义 列表 中 的 可 用 选项 。value 属性 规定 在 表单 被 提交 时 被 发 送 到 服务 器 的 值 。 
<option> 与 <option/> 之 间 的 值 是 浏览 器 显示 在 下 拉 列 表 中 的 内 容 ， 而 value 属性 中 的 值 是 表单 被 提交 时 被 发 
送 到 服务 器 的 值 ， 如 果 没 有 指定 value 属性 ， 选 项 的 值 将 设置 为 <option> 标 签 中 的 内 容 。 

【 例 10-1】 实例 文件 ，ch10\Chap10.1.html)》 使 用 <select> 和 <option> 标 签 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 

</head> 

<body> 

<select> 
<option value="al"> 苹 果 </option> 
<option Value="a2"> 西 瓜 </option> 
<option value="a3"> 香 蕉 </option> 

</select> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap10.1.html 文件 ， 在 正 浏览 器 中 


行 的 结果 如 图 10-3 所 示 。 


(al 


图 10-3 <select> 和 <option> 标 签 
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10.2.6 ”使 用 <fieldset> 和 <legend> 标 签 


<fieldset> 标 签 可 以 将 表单 内 的 相关 元 素 分 组 ， 并 会 在 相关 表单 元 素 周围 绘制 边框 。<legend> 标 签 用 于 
对 <fieldset> 标 签 定义 标题 。 
HTML 5 中 新 增 了 一 些 <fieldset> 的 新 属性 ， 如 表 10-2 所 示 。 


表 10-2 <fieldset> 的 新 属性 


属 性 属性 值 说 明 

disabled disabled 定义 该 组 中 的 相关 表单 元 素 被 禁用 

fom form id 定义 fieldset 所 属 的 一 个 或 多 个 表单 
string 定义 fieldset 的 名 称 


【 例 10-2】〔 实 例文 件 ，ch10\Chap10.2.html) 使 用 <fieldset> 和 <legend> 标 签 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<form> 
<fieldset> 
<legend> 注 册 </legend> 
姓名 : <input type="text"> 
年 龄 ; <input type="text"> 


</fieldset> 

</form> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap10.2.html 文件 ， 在 Chrome 浏览 器 中 运行 的 结果 如 图 10-4 所 示 。 

9 > 口 x 
国 Tue 3 
GC 全 |@ localhosti63342/ 源 码 /.. 好 从 

注册 
姓名 
年 龄 


图 10-4 <fieldset> 和 <legend> 标 签 


曙 10.2.7 使 用 HTML 5 增强 的 <textarea> 标 答 


<textarea> 标 签 用 于 定义 多 行文 本 域 ， 文 本 区 域 中 可 容纳 大 量 的 文本 ， 可 以 通过 cols 和 rows 属性 来 规 
定 <textarea> 的 尺寸 大 小 ， 也 可 以 在 CSS 中 使 用 height 和 width 属性 定义 它 的 尺寸 。 
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【 例 10-3】〔 实 例文 件 ，ch10\Chap10.3.html) 使 用 <textarea> 标 签 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<textarea cols="30" rows="10"> <!--cols 和 rows 属性 规定 textarea 的 尺寸 --> 
文本 内 容 
</textarea> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap10.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 10-5 所 示 。 


口 X 
国 cuserswdminisra D-C 避 
文件 旧 。 将 问 (。 查看 (V) 收藏 天 (A) 工具 ” 
文本 肉 容 ] 


臣 100% ~ 
图 10-5 <textarea> 标 签 


10.3 HTML 5 新 增 的 表单 元 素 


HTML 5 新 增 了 一 些 表单 元 素 ， 本 节 将 详细 介绍 。 


10.3.1 input 元 素 


HTML 5 拥有 多 个 新 的 表单 输入 类 型 。 这 些 新 特性 提供 了 更 好 的 输入 控制 和 验证 。 新 增 的 表单 输入 类 型 
如 下 。 

email，email 类 型 用 于 应 该 包含 E-mail 地 址 的 输入 域 。 

url: tl 类 型 用 于 应 该 包含 URL 地 址 的 输入 域 。 在 提交 表单 时 ， 会 自动 验证 url 域 的 值 。 

number: number 类 型 用 于 应 该 包含 数值 的 输入 域 。 

range: range 类 型 用 于 应 该 包含 一 定 范围 内 数字 值 的 输入 域 。 

date pickers: 日 期 选择 器 。 

search: search 类 型 用 于 搜索 域 ， 例 如 站 点 搜索 或 Google 搜索 。 

color: color 类 型 用 于 生成 一 个 颜色 选择 器 。 
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10.3.2 ”output 元 素 


<output> 标 签 作为 计算 结果 输出 显示 ， 如 执行 脚本 的 输出 。<outpuP> 标 签 是 HTML 5 中 的 新 标签 ， 它 的 
一 些 属性 值 如 表 10-3 所 示 ，IE 浏览 器 不 支持 该 属性 。 


表 10-3 ”<output> 标 签 的 属性 


属 性 说 明 
for 描述 计算 中 使 用 的 元 素 与 计算 结果 之 间 的 关系 
form 定义 输入 字段 所 属 的 一 个 或 多 个 表单 
name 定义 对 象 的 唯一 名 称 ,表单 提交 时 使 用 


【 例 10-4】 实例 文件 ，ch10\Chap10.4.html》output 元 素 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 


<!-- oninput 事件 在 用 户 输 入 时 触发 --> 
<form oninput="a.value=parseInt (x.value) +parseInt (y.value) "> 
<input type="number" id="x">+<input type="number" id="y" value="50">=<output name="a" for="x 
y"></output> 
</form> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap10.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 10-6 所 示 。 当 在 左边 文本 
框 中 输入 数值 时 ， 等 号 右边 显示 前 面 两 个 文本 框 之 和 ， 运 行 结果 如 图 10-7 所 示 。 


@ = 0 X 
国 Tue x 
CG 全 |@ localhost-63342/ 源 码 /ch1( 国信 
+|50 


图 10-6 ”页 面 加 载 时 的 效果 


e 一 口 X 
固 Te x 
CG 合 | © localhost-63342/ 源 F 轩 女 
[EE =99 


10-7 输入 数值 后 页 面 效 果 
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10.3.3 meter 元 素 


<meter> 标 签 用 于 定义 度量 衡 ， 常 用 于 静态 比例 的 显示 ， 如 : 磁盘 用 量 、 查 询 结果 的 相关 性 等 。<meter>“ 
标签 不 应 用 在 进度 条 中 ， 如 果 需 要 标记 进度 条 ， 请 使 用 <progress> 标 签 。 正 浏览 器 不 支持 该 属性 ，<meter> 
标签 包含 的 属性 如 表 10-4 所 示 。 
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表 10-4 <meter> 标 签 的 属性 


属 性 说 明 
high 定义 被 视 作 高 的 值 的 范围 
low 定义 被 视 作 低 的 值 的 范围 
max 定义 范围 的 最 大 值 
min 定义 范围 的 最 小 值 
value 定义 度量 值 ， 可 以 是 浮 点 型 ， 默 认为 0 


【 例 10-5】 实例 文件 ，ch10\Chap10.5.html》meter 元 素 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 

</head> 

<body> 
<hl>C 盘 和 DD 盘 已 占用 空间 </h1l> 
C 盘 :<meter value="0.8"></meter><br/> 
D 盘 :<meter value="0.5"></meter> 


<h1l> 你 喜欢 苹果 和 还 是 喜欢 香 燕 ? </h1> 


喜欢 苹果 的 人 : <meter min="0" max="100" value="60"></meter><br/> 
喜欢 香蕉 的 人 : <meter min="0" max="100" value="40"></meter> 


</body> 
</html> 


相关 的 代码 实例 请 参考 Chap10.5.html 文件 ， 在 Chrome 浏览 器 中 运行 的 结果 如 图 10-8 所 示 。 


加 Te x 
C OO | © localhost:63342/ 尖 吧 /ch 


C 盘 和 D 盘 已 占用 空间 


Cf 
DS 


喜欢 苹果 的 人 靖 
喜欢 香 燕 的 人 : 古本 


你 喜欢 苹果 和 还 是 喜欢 香蕉 ? 


图 10-8 meter 元素 
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10.3.4 ”progress 元 素 


<progress> 标 签 用 于 定义 运行 中 的 任务 进度 、 进 程 ， 可 以 使 用 progress 元 素来 显示 JavaScript 中 耗费 时 间 
的 函数 进程 。 如 下载 文 件 到 本 地 的 进度 值 。 正 9 或 者 更 早 版 本 的 正 浏览 器 不 支持 <progress> 标 签 ，<progress> 标 
签 包含 的 属性 如 表 10-5 所 指示 。 


表 10-5 <progress> 标 签 的 属性 
属 性 属性 值 说 明 
max number 定义 需要 完成 的 值 
value number 定义 进程 的 当前 值 
【 例 10-6】〔 实 例文 件 ，ch10\Chap10.6.html) 使 用 <progress> 标 签 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title>Title</title> 
</head> 
<body> 
<p> 文 件 下 载 的 进度 : </p> 


<progress value="33" max="100"></progress> 


</body> 
</html> 
相关 的 代码 实例 请 参考 Chap10.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 10-9 所 示 。 


- DO x 
加 cusersdmiisat 只 -上 | E Te 
文件 (站 久 壮 (E) 查看 (V) 收藏 只 (A) 工具 TT) 大 8 


文件 下 载 的 进度 ， 
= 


奈 100% > 
图 10-9 ”progress 元素 


10.3.5 ”keygen 元 素 


keygen 元 素 的 作用 是 提供 一 种 验证 用 户 的 可 靠 方法 。 当 提交 表单 时 ， 会 生成 两 个 键 ， 一 个 是 私 钥 ， 
个 公 钥 。 私 钥 存储 于 客户 端 ， 公 钥 则 被 发 送 到 服务 器 。 公 钥 可 用 于 之 后 验证 用 户 的 客户 端 证 书 。 
keygen 元 素 的 使 用 方法 代码 如 下 : 


<form action="/example/HTML 5/demo_form-asp” method="get"> 
用 户 名 : <input type="text" name="usr name" /> 


[ts: 


加 密 : <keygen name="security" /> 
<input type="submit" /> 
</form> 
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10.4 HTML 5 新 增 的 表单 属性 


HTML 5 增加 了 表单 元 素 和 一 些 表单 属性 ， 本 节 将 介绍 其 中 一 些 比较 常用 的 属性 。 
1.formaction 属性 洒 


假如 一 个 页 面 中 有 一 个 填写 信息 的 表单 ， 用 于 注册 和 登录 ， 程 序 需要 这 两 个 按钮 提交 给 不 同 的 处 理 逻 
辑 。 在 HTML 5 之 前 ， 需 要 使 用 JavaScript 来 实现 ， 当 用 户 单 击 不 同 按 钮 时 ， 通 过 使 用 JavaScript 控制 修改 
<form> 元 素 的 action 属性 ， 来 达到 上 述 要 求 。 

使 用 HIML 5 中 的 formaction 属性 可 以 很 简单 地 处 理 这 个 问题 ， 对 于 <input type="submit">、<button 
type="submit"></button> 和 <input type="image"> 元 素 ， 都 可 以 指定 formaction 属性 ， 该 属性 即 可 让 表单 提交 
到 不 同 的 URL， 代 码 如 下 : 

<form method="get"> 

登录 : <input type="text" name="fname" /><br /> 

注册 : <input type="text" name="lname" /><br /> 

<input type="submit" value=" 登 录 ” formaction="login"/><br /> 

<input type="submit" value=" 注 册 ” formaction="regist"/> 
</form> 


2. formmethod 属性 


formmethod 属性 可 以 动态 的 设置 表单 以 post 或 者 get 方式 提交 ， 覆 盖 form 元 素 的 原 有 method 属性 ， 
代码 如 下 : 


<form action="abc" method="get"> 
登录 : <input type="text" name="fname" /><br /> 
注册 : <input type="text" name="lname" /><br /> 
<input type="submit" value=" 登 录 ” formmethod="get"/><br /> 
<input type="submit" value=" 注 册 "” formmethod="post"/> 
</form> 


当 单 击 登 录 时 ， 会 采用 get 方式 提交 请 求 ， 单 击 注册 时 ， 将 以 post 方式 提交 请 求 。 
3. autofocus 属性 


autofocus 属性 用 于 页 面 加 载 完成 时 ， 某 个 表单 自动 获得 焦点 。 由 于 页 面 中 只 能 有 一 个 表单 元 素 可 以 获 各 
得 焦点 ， 所 以 整个 页 面 最 多 只 能 设置 一 个 autofocus 属性 。 目 前 大 部 分 主流 浏览 器 已 经 支持 该 属性 。 
【 例 10-7】 实例 文件 ，ch10\Chap10.7.html》autofocus 属性 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
<p> 页 面 加 载 完成 时 ，input 元 素 自 动 获取 焦点 </p> 
<input type="text" autofocus="autofocus"> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap10.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 10-10 所 示 。 
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oo x 
国 CWserspdminisrat DC| 三 Tte 
HN MD HEM Ka IRM Wi” 


页 面 加 载 完成 时 ， input 元 素 自 动 获取 焦点 


矶 1o0% 


10-10 ”autofocus 属性 


4. placeholder 属性 


placeholder 属性 用 于 设置 文本 框 或 者 文本 域 中 未 输入 内 容 时 的 显示 内 容 ， 当 用 户 获 得 该 文本 框 的 焦点 
或 输入 时 ， 该 属性 的 值 就 会 消失 。 
【 例 10-8】〔 实 例文 件 ，ch10\Chap10.8.html)》placeholder 属性 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 

</head> 

<body> 

<form action="abc" method="get"> 
<input type="text" name="fname"” placeholder=" 用 户 名 "/><br /> 
<input type="text" name="lname"” placeholder=" 密 码 "/><br /> 
<input type="submit" value=" 注 册 "” /> 


</form> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap10.8.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 10-11 所 示 。 
= 口 x 
Dovevaninem -cS 
文件 月 蝙 强 (5) 查看 (V) 收藏 天 (A) 工具 (1) 如 车 (H) 
搞 100% > 
图 10-11 placeholder 属性 
5. list 属性 


list 属性 需要 结合 <datalis> 标 签 一 起 使 用 ， 形 成 一 个 下 拉 莱 单 的 效果 ，list 的 属性 值 指 定 <datalist> 标 签 
的 这 值 。 
【 例 10-9】 (实例 文件 ， chl0\Chap10.9.html) list 属性 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
</head> 
<body> 
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<form action="abc" method="get"> 

<input type="text" name="fname" list="fruits"/> 
</form> 
<datalist id="fruits"> 

<option value=" 革 果 "> 

<option value=" 香 若 "> 

<option value=" 西 瓜 "> 


</datalist> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap10.9.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 10-12 所 示 。 


口 
wees Wannsuat p+ © Grue 
文件 (月 ”篇 镶 (E) 可 看 NV) 履 苞 ( 人 A) 工具 (帮助 (H) 


R100% ~ 


10-12 list 属性 


6. autocomplete 属性 


autocomplete 属性 定义 表单 是 否 应 该 启用 自动 完成 功能 。 自 动 完成 功能 是 当 用 户 在 字段 开始 输入 值 时 ,四 名 
浏览 器 基于 之 前 输入 过 的 值 ， 应 该 显示 出 在 字段 中 填写 的 选项 。 
【 例 10-10】 实例 文件 ，ch10\Chap10.10.html》autocomplete 属性 。 


<!DocTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 

</head> 

<body> 

<form method="get" autocomplete="on"> 
姓名 : <input type="text" name="fname"> 
<input type="submit" /> 

</form> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap10.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 10-13 所 示 。 在 表单 中 输 
入 “ 达 文 西 ”， 单 击 “ 提 交 查 询 内 容 ” 按 钮 ， 如 图 10-14 所 示 。 然 后 刷新 页 面 ， 当 在 文本 中 输入 “ 达 ” 的 时 
候 ， 用 鼠标 指针 单 击 一 下 文本 框 ， 会 弹出 “ 达 文 西 ”的 提示 ， 效 果 如 图 10-15 所 示 。 


oo x - oO x 
图 csersWdninisvat PP- | 戎 The 于 CausersWdrinietat -| 其 Thie 
文件 月 ” 昕 嫩 E] 二 者 WV) 收藏 夫 A) 工兵 中 帮助 ” 文件 旧病 号 (E) 至 (/)。 牧 戈 夫 (A) 工具) 帮助 ” 


姓名 ， 埋 交 查 词 内 容 姓名 : 区 广西 "| 提交 富 hg 容 | 


成 100% > file//C/Users/Administrator/Desktop/. 把 100% ~ 
图 10-13 ”页面 加 载 完 效果 图 10-14 ”提交 内 容 
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-EE 
Ble///C/Users/Admi P -上 THe 
文件 日” 六 癌 昌吉 各 (V)。 收 京 夫 (A) 工具 T) 帮助“ 


姓名 , 区 I “|[ 
达 文 西 


区 100% ~ 


图 10-15 提示 效果 


10.5 HTML 5 新 增 的 客户 端 校 验 


在 以 前 ， 客 户 端 校 验 通常 使 用 JavaScript 来 完成 ， 自 HTML 5 出 现 以 后 ，HTML 5 为 表单 增加 了 一 些 输 
入 校 验 属性 ， 只 需要 简单 设置 这 些 校 验 属性 即 可 完成 客户 端的 校 验 。 


10.5.1 使 用 校 验 属性 执行 校 验 


HTML 5 新 增 了 表单 的 校 验 属性 ， 如 required、pattern 等 。 
required， 定义 表单 不 能 为 空 。 属 性 值 是 required 或 者 省 略 。 
patterm: 定义 表单 满足 相应 的 正则 表达 式 。 

1.required 属性 

required 属性 用 于 定义 表单 不 能 为 空 ， 属 性 值 是 required 或 者 省 略 。 
【 例 10-11】 实例 文件 ，ch10\Chap10.11.html)》required 属性 。 


<!DocTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 

</head> 

<body> 

<form action="#"> 
<input type="text" required/> 
<input type="submit"” value=" 提 交 "> 

</form> 

</body> 

</html> 


当 单 击 “提交 ”按钮 时 ， 提 示 相 关 的 代码 实例 请 参考 Chap10.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 
如 图 10-16 所 示 。 


Ne RN Rn we 
[JE 
这 是 必 填 宇 段 

5 


10-16 required 属性 
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2. pattern 属性 
pattern 属性 定义 表单 满足 相应 的 正则 表达 式 。 
【 例 10-12】 实例 文件 ，ch10\Chap10.12.html》patterm 属性 。 


相关 的 代码 实例 请 参考 Chap10.12.html 文件， 在 正 浏览 器 中 运行 的 结果 如 图 10-17 所 示 。 


全 请 锭 入 11 位 有 效 的 手机 


图 10-17 pattem 属性 


10.5.2 ” 自 定义 错误 提示 


在 HTML 5 中 ,可 以 使 用 setCustomValidity0 方 法 自 定义 错误 提示 信息 ， 在 提交 表单 时 ， 就 会 看 到 弹出 
的 提示 框 中 包含 自 定义 的 错误 信息 。 
【 例 10-13】 实例 文件 ，ch10\Chap10.13.html》setCustomValidity0 方 法 校 验 。 


二 
克 
HfML 5+XCSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 


if(input.value.length < 15){ // 如 果 少 于 15 个 字 ， 执 行 下 面 语句 
input.setCustomValidity(" 感 想 不 得 少 于 15 个 字 "); 
Jelse{ // 和 否则 执行 下 面 语句 
input .setcustomValidity(""); 
} 
} 
</script> 


相关 的 代码 实例 请 参考 Chap10.13.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 10-18 所 示 。 


- Be x 
于 cwuserswdminisrat P - 6 | 三 训 
文件 (站 震 沪 E) 可 看 V】 。 收 茂 去 (A) 工具 ” 


123456789| xj 提交 | 


评论 不 得 少 于 20 字 


二 100% ~ 


图 10-18 ”setCustomValidity() 方 法 


10.5.3 ”关闭 校 验 

如 果 需 要 关闭 HTML 5 对 表单 提供 的 校 验 功能 ， 有 以 下 两 种 方法 来 实现 。 

(1) 在 <form> 元 素 中 添加 novalidate 属性 ， 禁 用 整个 表单 的 验证 功能 ， 代 码 如 下 : 
<form action="#" novalidate> 


(2) 给 提交 按钮 添加 formnovalidate 属性 ， 代 码 如 下 : 


<input type="submit" value=" 提 交 " formnovalidate> 


10.6 ”实践 案例 一 一 设计 美化 搜索 页 面 


本 章 主要 介绍 了 HTML 5 表单 及 表单 控件 相关 的 元 素 和 属性 ， 下 面 来 设计 一 个 搜索 页 面 ， 并 使 用 CSS 
美化 它 。 

每 个 网 站 基本 上 都 有 搜索 功能 ， 让 浏览 者 更 好 地 找到 自己 需要 的 内 容 。 本 案例 主要 分 了 3 个 部 分 去 设 
计 ， 分别 是 导航 条 、logo、 搜 索 框 ， 具 体 请 看 下 面 的 案例 。 

【 例 10-14】 实例 文件 ，ch10\Chap10.14.html》 搜 索 页 面 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
body{ 
background-image: url("03.jpg"); 
background-size: cover; /* 设 置 背景 图 片 铺 满 整个 容器 */ 


和 
/* 设 置 右 上 角 的 导航 条 */ 


ul{ 
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2 
pm ess 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 
ND 


<1i><a href=""> 注 册 </a></1i> 
</ul> 
<div class="title"> 
<div> 搜 </div> 
<qdiv> 搜 </div> 
<div> 搜 </div> 
</div> 
<div class="box"> 
<input type="text" class="searchl"><input type="button" value=" 搜 搜 搜 " class="search2"> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap10.14.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 10-19 所 示 。 


x 
| 闻 cNuserswdministatorDesktep\RBhorch 记 ”上 | 车 Te x 人 加 介 交 三 @ 
文件 (月 ”六 辑 (E) ”可 看 (V) 。 必 意 空 (入 工具 (]) 帮助 (H) 


10-19 ”搜索 界面 效果 


10.7 ”就 业 面试 技巧 与 解析 


10.7.1 ”面试 技巧 与 解析 (一) 


面试 官 : 请 问 HTML 5 表单 的 输入 类 型 有 哪些 。 

应 聘 者 : HTML 5 表单 的 输入 类 型 有 : 

url 类 型 url 属性 用 于 说 明 网 站 网 址 。 

tel 类 型 : tel 类 型 的 input 元 素 被 设计 为 用 来 输入 电话 号 码 的 专用 文本 框 。 

color 类 型 ，color 类 型 的 input 元 素 用 来 选取 颜色 ， 它 提供 了 一 个 颜色 选取 器 。 

email 类 型 ，email 属性 用 于 让 浏览 者 输入 E-mail 地 址 。 

Tange 类 型 ， range 属性 是 显示 一 个 滚动 的 控件 ， 与 number 属性 一 样 ， 用 户 可 以 使 用 max、min 和 step 
属性 控制 控件 的 范围 。 
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search 类 型 ， search 类 型 的 input 元 素 是 一 种 专门 用 来 输入 搜索 关键 词 的 文本 框 。 

number 类 型 ，number 属性 提供 了 一 个 输入 数字 的 输入 类 型 。 

datepickers 类 型 : datepickers 类 型 指 日 期 类 型 , HTML 中 提供 了 多 个 可 供 选 取 日 期 和 时 间 的 新 输入 类 型 ， 
用 于 验证 输入 的 日 期 与 时 间 。 


10.7.2 面试 技巧 与 解析 (二) 


面试 官 : 请 问 HTML 5 新 增 了 哪些 表单 元 素 。 

应 聘 者 : HTML 5 新 增 的 表单 元 素 有 : 

<datalist>: <datalist> 元 素 规定 了 <input> 元 素 可 能 的 选项 列表 。 

<keygen>: <keygen> 元 素 的 作用 是 提供 一 种 验证 用 户 的 可 靠 方 法 ， 当 提交 表单 时 ， 会 生成 两 个 键 ， 一 
个 是 私 钥 ， 另 一 个 是 公 钥 。 私 钥 存储 于 客户 端 ， 公 钥 则 被 发 送 到 服务 器 ， 公 钥 可 用 于 之 后 验证 用 户 
的 客户 端 证 书 。 

<output>: <output> 元 素 用 于 不 同类 型 的 输出 ， 例 如 计算 或 脚本 输出 。 
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第 11 章 
Web 标准 与 网 页 布局 


后 > 学习 指引 


在 网 页 设计 中 要 遵循 Web 标准 规则 。 网 页 的 布局 会 直接 影响 一 个 网 站 的 整体 美观 ， 本 章 将 主要 介绍 使 
用 CSS 来 实现 网 页 布局 。 


三 重点 导读 


。 了 解 Web 标准 与 CSS 布局 。 
。 了 解 网 页 的 排版 。 

。 掌 握 CSS 定位 。 

掌握 浮动 布局 


11.1 Web 标准 与 CSS 布局 


Web 标准 和 CSS 布局 的 优势 ， 是 作为 前 端 开 发 人 员 必 须要 了 解 的 知识 ， 下 面 来 具体 介绍 一 下 。 


11.1.1 什么 是 Web 标准 


Web 标准 是 由 W3C 和 其 他 标准 化 组 织 制定 的 一 套 规范 集合 ， 目 的 在 于 创建 统一 的 用 于 Web 表现 层 的 
技术 标准 ， 以 便 通过 不 同 的 浏览 器 或 终端 设备 向 最 终 用 户 展示 信息 内 容 。Web 标准 由 一 系列 规范 组 成 ， 目 
前 的 Web 标准 主要 由 3 大 部 分 组 成 : 结构 、 表 现 、 行 为 。 

1. 结构 

结构 用 于 对 网 页 中 用 到 的 信息 进行 分 类 与 整理 。 在 结构 中 用 到 的 技术 主要 包括 HIML、XML 和 
XHTML 。 


2. 表现 
表现 用 于 对 信息 进行 版 式 、 颜 色 、 大 小 等 形式 的 控制 。 在 表现 中 用 到 的 技术 主要 是 CSS 层叠 样式 表 。 
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3. 行为 

行为 是 指 文档 内 部 的 模型 定义 及 交互 行为 的 编写 ， 用 于 编写 交互 式 的 文档 。 在 行为 中 用 到 的 技术 主要 
包括 DOM 和 ECMAScript。 

DOM 文档 对 象 模型 : DOM 是 浏览 器 与 内 容 结构 之 间 沟 通 的 接口 , 使 浏览 者 可 以 访问 页 面 上 的 标准 组 件 。 

ECMAScript 脚本 语言 ， ECMAScript 是 标准 脚本 语言 ， 用 于 实现 具体 界面 上 对 象 的 交互 操作 。 


11.1.2 CSS 布局 的 优势 


掌握 基于 CSS 的 网 页 布局 方式 ， 是 实现 Web 标准 的 基础 。 在 制作 网 页 时 采用 CSS 技术 ， 可 以 有 效 地 
对 页 面 的 布局 、 字 体 、 颜 色 、 背 景 和 其 他 效果 实现 更 加 精确 地 控制 。 只 要 对 相应 的 代码 做 一 些 简单 的 修改 ， 
就 可 以 改变 网 页 的 外 观 和 格式 。 采 用 CSS 布局 有 以 下 优点 : 

可 以 轻松 地 控制 页 面 的 布局 。 

大 大 缩减 页 面 代 码 ， 提 高 页 面 浏览 速度 ， 缩 减 带宽 成 本 。 

结构 清晰 ， 容 易 被 搜索 引擎 搜索 到 。 

缩短 改版 时 间 ， 只 要 简单 地 修改 几 个 CSS 文件 就 可 以 重新 设计 一 个 有 成 百 上 千 页 面 的 站 点 。 

CSS 非常 容易 编写 ， 可 以 像 写 HTML 代码 一 样 轻松 地 编写 CSS。 

提高 易 用 性 ， 使 用 CSS 可 以 结构 化 HTML， 如 Pp 标记 只 用 来 控制 段落 ，h 标记 只 用 来 控制 标题 ，table 

标记 只 用 来 表现 格式 化 的 数据 等 。 

表现 和 内 容 相 分 离 ， 将 设计 部 分 分 离 出 来 ， 放 在 一 个 独立 的 样式 文件 中 。 

几乎 在 所 有 的 浏览 器 上 都 可 以 使 用 。 

以 前 一 些 必须 通过 图 片 转 换 实现 的 功能 ， 现 在 只 要 用 CSS 就 可 以 轻松 实现 ， 从 而 可 以 更 快 地 加 载 页 面 。 


11.2 ”网 页 排版 


11.2.1 网 页 排版 基本 原则 


回 

在 网 页 设计 中 ， 除 了 我 们 强调 的 配色 方案 、 字 体 、UI 元 素 之 外 ， 还 有 一 个 重要 的 点 ， 那 就 是 设计 布局 
的 四 大 原则 。 

1. 对 齐 

对 齐 : 任何 东西 都 不 能 在 页 面 上 随意 安放 ， 每 个 元 素 都 应 当 与 页 面 上 的 另 一 个 元 素 有 某 种 视觉 联系 ， 
这 样 能 建立 一 种 清晰 、 精 巧 而 且 清爽 的 外 观 。 

2. 对 比 

对 比 : 对 比 的 基本 思想 是 ， 要 避免 页 面 上 的 元 素 太 过 相似 。 如 果 元 素 字体、 颜色 、 大 小 、 线 宽 、 形 
状 、 空 间 等 ) 不 相同 ， 那 就 干脆 让 它们 截然 不 同 。 要 让 页 面 引 人 注 目 ， 对 比 一 般 是 最 重要 的 一 个 因素 。 

3. 亲密 性 

亲密 性 :彼此 相关 的 项 应 当 靠 近 ， 归 组 在 一 起 。 如 果 多 个 项 相互 之 间 存 在 很 近 的 亲密 性 ， 它 们 就 会 成 
为 一 个 视觉 单元 ， 而 不 是 多 个 孤立 的 元 素 。 这 有 助 于 组 织 信息 ， 减 少 混 乱 ， 为 读者 提供 清晰 的 结构 。 
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4. 重复 


重复 : 让 设计 中 的 视觉 要 素 在 整个 作品 中 重复 出 现 。 可 以 重复 颜色 、 形 状 、 材 质 、 空 间 关系 、 线 宽 、 


字体 、 大 小 和 图 片 等 。 这 样 一 来 ， 既 能 增加 条 理性 ， 还 可 以 加 强 统一 性 。 


11.2.2 ”标准 网 页 版 式 基本 形式 


在 版 式 设计 当中 ， 主 要 有 以 下 几 种 排版 形式 : 中 轴 型 、 分 割 型 、 倾 斜 型 、 满 版 型 、 对 称 型 。 这 几 种 形 


式 会 常 出 现在 网 页 设计 当中 。 

1. 中 轴 型 

中 轴 型 的 网 页 设计 , 是 将 图 形 做 水 平 或 垂直 方向 的 排列 , 文案 以 上 下 或 左右 配置 。 水 平 排列 的 版 面 
会 给 人 稳定 、 安 静 、 和 平 与 含蓄 之 感 。 垂 直 排列 的 版 面 给 人 强烈 的 动感 。 垂 直 排 列 这 种 排版 方式 比较 
常见 

2. 分 割 型 

分 割 型 主要 可 以 分 成 上 下 分 割 和 左右 分 割 。 相 比较 ， 左 右 分 割 型 的 网 站 会 比较 常见 。 

3. 倾斜 型 


倾斜 型 的 网 站 比较 少见 ， 这 样 的 网 站 偏 个 性 化 一 些 ， 多 在 一 些 设计 公司 或 是 运动 品牌 的 网 站 中 出 现 。 


4. 满 版 型 


满 版 型 的 网 站 近 几 年 越 来 越 多 见 ， 通 常 是 版 面 以 图 像 充 满 整 版 ， 主 要 以 图 像 为 诉求 ， 视 觉 传 达 直观 而 


强烈 。 文 字 的 配置 压 置 在 上 下 、 左 右 或 中 部 的 图 像 上 。 满 版 型 给 人 以 大 方 、 舒 展 的 感觉 。 
5. 对 称 型 


对 称 的 版 式 给 人 稳定 、 庄 重 、 理 性 的 感觉 。 对 称 有 绝对 对 称 和 相对 对 称 ， 一 般 多 采用 相对 对 称 ， 以 避 


免 过 于 严谨 。 对 称 一 般 以 左右 对 称 居多 。 
每 种 版 式 设计 并 非 以 一 种 表现 形态 出 现 ， 在 分 析 一 个 网 站 的 时 候 不 要 以 单一 的 视角 去 分 析 ， 


小 一 外 


网 站 的 设计 可 能 同时 存在 好 几 种 版 式 形式 。 不 同 的 排版 可 以 给 人 不 同 的 视觉 感受 ， 好 的 排版 会 给 整个 网 站 


“锦上添花 ”。 版 式 也 没有 绝对 的 好 坏 ， 只 有 适合 和 不 适合 。 


11.3 CSS 定位 


在 HTML 中 改变 布局 有 两 种 方式 ,一 种 是 float， 另 一 种 是 position 定位 ， 本 节 来 讲 一 下 position 定位 。 


1. 认识 position 


position 是 CSS 中 非常 重要 的 一 个 属性 ， 通 过 position 属性 ， 我 们 可 以 让 元 素 相 对 于 其 正常 位 置 、 父 元 


素 或 者 浏览 器 窗口 进行 偏 移 。position 属性 有 4 个 属性 值 ，static、relative、absolute 和 fixed， 下 面 详细 介绍 


Position 属性 。 
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2. 静态 定位 

“position: static:” 用 于 对 元 素 静态 定位 。 六 

在 HIML 中 ， 所 有 元 素 默 认为 静态 定位 ， 如 果 没 有 指定 元 素 的 position 属性 值 ， 也 就 是 默认 情况 下 ， 
元 素 是 静态 定位 。 只 要 是 支持 position 属性 的 html 对 象 都 是 默认 为 static。static 是 position 属性 的 默认 值 ， 
它 表示 块 保留 在 原本 应 该 在 的 位 置 ， 不 会 重新 定位 ， 它 的 位 置 不 能 使 用 left、right、top、bottom 4 个 属性 来 
设置 。 


3. 绝对 定位 

“position: absolute;” 用 于 对 元 素 绝对 定位 。 

如 果 绝 对 定位 的 父 元 素 设置 了 除 static 之 外 的 定位 ， 例 如 “position: relative:” 或 “position: absolute;” 
及 “position: fixed:”， 那 么 它 就 会 相对 于 它 的 父 元 素来 定位 ， 如 果 它 没有 已 定位 的 父 元 素 ， 那么 它 的 位 置 相 
对 于 <html> 元 素 。 相 对 位 置 可 以 使 用 left、right、top、bottom 4 个 属性 来 设置 。 

【 例 11-1】〔 实 例文 件 ，ch011\Chap11.1.html》 绝 对 定位 。 

<!DOCTYPE html> 


<html> 
<head> 


<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
-box1{ 
position: absolute; /* 设 置 绝对 定位 */ 
left: S50px; 
top: SOpx; 
} 
-box2{ 
position: absolute; 
left: 350px; 


top: SOpx; 
于 
</style> 
</head> 
<body> 


<!-- 父 元 素 box 没有 定位 ,boxl 相对 于 <html> 定 位 --> 
<div class="box"> 
<div class="boxl"><img src="01.jpg" alt=""></div> 
</div> 
<!-- 父 元 素 box2 有 定位 ,boxl 相对 于 box2 定位 --> 
<div class="box2"> 
<div class="boxl"><img src="01.jpg" alt=""></div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap11.1.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-1 所 示 。 
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11-1 绝对 定位 


注意 : 绝对 定位 元 素 可 层 登 ， 层 登 顺序 可 通过 z-index 属性 控制 ，z-index 值 为 无 单位 的 整数 ， 大 的 在 
上 面 ， 可 以 有 负 值 。 


4. 相对 定位 

“position: relative;” 用 于 对 元 素 相 对 定位 。 

相对 定位 元 素 的 定位 是 相对 它 自 身 正常 的 位 置 来 实现 的 。 相 对 定位 的 元 素 ， 它 原本 所 占有 的 空间 不 会 
改变 。 相 对 位 置 可 以 使 用 left、right、top、bottom 4 个 属性 来 设置 。 

【 例 11-2】 (实例 文件 ， chO1l\Chap11.2.html) 相对 定位 。 

<!DOCTYPE html> 


<html> 
<head> 


回 


<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
-boxt{ 
position: relative; /* 设 置 相 对 定位 */ 
left:500px; 
} 
</style> 
</head> 
<body> 
<div><img src="01.jpg" alt=""></div> 
<div class="box"><img src="01.jpg" alt=""></div> 
<div><img src="01.jpg" alt=""></div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap11.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-2 所 示 。 
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相对 定位 后 的 位 置 


正常 的 位 子 


R55% 


图 11-2 相对 定位 
5. 固定 定位 
“position:fixed;” 用 于 对 元 素 固 定 定位 。 
固定 定位 是 相对 于 浏览 器 窗口 进行 定位 ， 它 的 位 置 不 会 随 着 浏览 器 的 滚动 而 改变 。 相 对 位 置 可 以 使 用 
left、right、top、bottom 4 个 属性 来 设置 。 
【 例 11-3】〔 实 例文 件 ，ch011\Chap11.3.html》 固 定 定位 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
div{font-size: 50px;} 
hi{ 
position:fixed; /* 设 置 固定 定位 */ 
left: 500px; 
top: 200px; 
和 
</style> 
</head> 
<body> 
<hl> 国 定 定位 </h1> 
<div><img src="01.jpg" alt="">1</div> 
<div><img src="01.jpg" alt="">2</div> 
<div><img src="01.jpg" alt="">3</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap11.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-3 所 示 。 当 滚动 滚动 条 
时 ， 会 发 现 “ 固 定 定位 ”始终 不 动 ， 如 图 11-4 所 示 。 
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图 11-3 ”页面 加 载 完 的 效果 图 11-4 ”滚动 滚动 条 后 的 效果 


11.4 浮动 布局 及 浮动 藤 套 


1. 浮动 布局 

浮动 布局 是 我 们 在 布局 中 经 常用 到 的 一 种 技术 ， 利 用 它 进行 布局 很 方便 ， 通 过 让 元 素 浮动 ， 可 以 使 元 
素 在 水 平 上 左右 移动 。 

【 例 11-4】 (实例 文件 ， choll\Chap11.4.html) 浮动 布局 。 


<!DocTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
-box{ 
width: 700px; 
height: 200px; 
font-size: 30px; 
border: lpx solid #000000; 
4 
.box div{ 
width: 150px; 
height: 150px; 
border:1px solid red; 
} 
-flol{float: left;} /* 设 置 左 浮动 +/ 
.flo2{float: left;} 
.flo3{float: left;} 
-flo4{float: right;} /* 设 置 右 浮动 */ 
</style> 
</head> 
<body> 
<div class="box"> 
<div class="fl01">1</div> 
<div class="flo2">2</div> 
<div class="flo3">3</div> 
<div class="flo4">4</div> 
</div> 
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相关 的 代码 实例 请 参考 Chap11.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-5 所 示 。 


1 


图 11-5 浮动 布局 


2. 浮动 嵌 套 

当 一 个 divl 里 面 嵌 套 有 一 个 div2， 当 div2 设置 了 浮动 ， 那 么 divl 是 无 法 被 撑 开 的 ， 也 就 是 说 div2 在 
这 里 相当 于 浮 在 了 页 面 上 方 ， 跟 divl 不 在 同一 个 层面 ， 导 致 了 div2 无 法 把 divl 给 撑 开 ， 这 是 一 个 老生 常 
谈 的 问题 ， 也 是 困扰 很 多 刚 接触 DIV+CSS 的 读者 的 一 个 问题 。 

可 以 通过 添加 一 个 空 iv， 设 置 clear:both， 便 可 以 让 divl 获取 到 高 度 了 。 

【 例 11-5】〔 实 例文 件 ，ch011\Chap11.5.html》 浮 动 嵌 套 。 
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<div class="boxl">boxl</div> 
<div class="box2">box2</div> 


<!-- 解 决 谋 套 问题 的 代码 -一 > 


<div style="clear: both"></div> 


</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap11.5.html 文件 ， 在 正 浏览 器 9 


3. 清除 浮动 


国 cuserswdminsa PD "5 


交 伯 从” 振 吕 晶 要 看 V) 站 友人 工交) 


口 ”要 


各 cwerewdl 


矶 100% 


11-6 浮动 嵌 套 


运行 的 结果 如 图 11-6 所 示 。 


浮动 会 使 当前 元 素 产 生 向 上 浮 的 效果 ,同时 会 影响 到 前 后 标签 、 父 元 素 的 位 置 及 width、height 等 属性 ， 
可 以 说 浮动 问题 是 每 个 前 端 设 计 师 必 会 的 技能 之 一 。 


在 前 面 一 节 中 ， 通 过 在 浮动 元 素 的 后 面 添 加 一 个 <div>， 设 置 它 的 样式 为 “clear:both”， 来 解决 


素 浮动 撑 不 开 父 元 素 的 问题 ， 这 就 是 一 种 清除 浮动 的 方法 。 


下 面 再 来 介绍 一 种 方法 ， 通 过 给 父 元 素 添加 “overflow:hidden” 或 者 “overflow:auto: ”。 


【 例 11-6】 (实例 文件 ， choll\Chap11.6.html) 清除 浮动 。 


<!DOCTYPE html> 
<html> 
<head> 


<meta charset="UTF-8"> 
<title> 清 除 浮动 </title> 


<style> 
-box{ 


width: 300px; 


background-color:red; 


color: white; 
font-size: 20px; 
overflow: hidden; 


¥ 
-boxlf 


/* 清 除 浮动 代码 */ 


background-color:green; 


float:left; 


height:100px; 


width:50px; 
} 
-box2{ 


/* 设 置 左 浮动 */ 


background-color:blue; 


float:right; 
height:100px; 


width:50px; 
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</style> 
</head> 
<body> 
<div class="box">box 
<div class="box1">box1</div> 
<div class="box2">box2</div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap11.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-7 所 示 。 


三 下 次 
国 cWsersVaminiovet P- 6] 要 cue 
| 文 kPaSE) EV) 效 荐 夫 (A) 了 IEm 帮 印 (H) 


图 11-7 清除 浮动 
清除 浮动 有 很 多 种 方法 ， 在 这 里 就 不 过 多 介绍 了 。 


11.5 “案例 实战 


11.5.1 两 列 布局 


实现 两 列 布局 很 简单 ， 也 有 很 多 种 方法 ， 本 案例 介绍 其 中 一 种 一 一 左 侧 固定 大 小 ， 右 侧 自 适应 。 将 左 
侧 div 浮动 ， 右 侧 设置 div 的 margin-left 属性 合适 的 值 ， 便 可 以 实现 这 种 两 列 布局 。 
【 例 11-7】 实例 文件 ，ch011\Chap11.7.html》 两 列 布局 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
-box1{ 
width: 200px; 
height: 200px; 
background: #00E1F3; 
float: left; /*# 设 置 左 浮动 */ 


Wr 
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-box2{ 
width: 100%; 
height: 200px; 
background:#00FF7F; 
margin-left: 200px; 
</style> 
</head> 
<body> 
<div> 
<div class="box1l"> 左 边 固定 </div> 
<div class="box2"> 
燕子 去 了 ,有 再 来 的 时 候 ; 杨柳 枯 了 ,有 再 青 的 时 候 ; 桃花 谢 了 , 有 再 开 的 时 候 。 但 是 ,聪明 的 , 你 告诉 我 ， 我 们 的 日 子 
为 什么 一 去 不 复 返 呢 ? 是 有 人 偷 了 他 们 罢 : 那 是 谁 ? 又 藏 在 何 处 呢 ? 是 他 们 自己 逃走 了 罢 ; 现在 又 到 了 哪里 兄 ? 我 不 知道 他 们 给 了 
我 多 少 日 子 ; 但 我 的 手 确 平 是 渐渐 空虚 了 。 
选 自 《朱自清 散文 集 》 
</div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap11.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 11-8 所 示 。 当 改变 浏览 器 
宽度 时 ， 右 侧 的 div 自 适 应 ， 效 果 如 图 11-9 所 示 。 
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图 11-8 页 面 加 载 完 效果 图 11-9 自 适应 效果 


三 列 布局 


三 列 布局 ， 有 经 典 的 双飞 燕 和 圣杯 布局 ， 本 案例 通过 圣杯 布局 来 讲解 。 

在 代码 中 center 部 分 首先 要 放 在 container 的 最 前 部 分 ， 然 后 是 leftright。 

将 三 者 都 float:left， 再 加 上 一 个 position:relative (因为 相对 定位 后 面 会 用 到 )。 

center 部 分 width:100% 占 满 。 

此 时 center 占 满 了 ， 所 以 要 把 left 拉 到 最 左边 ， 使 用 margin-left:-100%。 

此 时 lef 拉 回来 了 ， 但 会 覆盖 center 内 容 的 左 端 ， 要 把 center 内 容 拉 出 来 ， 所 以 在 外 围 container 加 上 
padding:0 200px。 

center 内 容 拉 回来 了 ， 但 left 也 跟着 过 来 了 ， 所 以 要 还 原 ， 就 对 left 使 用 相对 定位 left:-200px。 同 理 ， 
Tight 也 要 相对 定位 还 原 right:-200px。 

按照 上 面 讲解 的 步骤 ， 圣 杯 布局 已 经 实现 了 。 具 体 代码 请 看 下 面 的 案例 。 
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【 例 11-8】》 实例 文件 ，ch011\Chap11.8.html》 三 列 布局 。 
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</div> 
<div class="right"> 
<h3>right</h3> 
<p></p> 
</div> 
</div> 
<div class="footer"> 
<h3>footer</h3> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap11.8.html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 11-10 所 示 。 当 改变 浏览 器 
宽度 时 ，center 部 分 会 随 着 自 适应 ， 效 果 如 图 11-11 所 示 。 


11-10 ”页 面 加 载 完 效果 


图 11-11 自 适应 效果 


11.6 ”就 业 面试 技巧 与 解析 


11.6.1 面试 技巧 与 解析 〈 一 ) 


面试 官 : 请 谈 谈 你 对 rem 的 理解 。 
应 聘 者 : rem 用 来 实现 自 适应 布局 ， 是 现在 移动 开发 比较 流行 的 布局 之 一 。rem 是 根据 HTML 根 元 素 
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的 font-size 大 小 来 变化 的 ， 正 是 基于 这 个 原因 ， 可 以 在 每 一 个 设备 下 根据 设备 的 宽度 设置 对 应 的 HTML 字 
号 ， 从 而 实现 自 适应 布局 。 目 前 有 两 种 方式 来 调整 HTML 根 元 素 的 font-size 大 小 ， 一 种 是 根据 JavaScript 
来 调整 HTML 的 字号 ， 另 一 种 则 是 通过 媒体 查询 来 调整 字号 。 


11.6.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : DIV+CSS 布局 有 什么 优势 ? 

应 聘 者 : 

保持 视觉 的 一 致 性 。 以 往 表格 嵌 套 的 制作 方法 会 使 得 页 面 与 页 面 或 者 区 域 与 区 域 之 间 的 显示 效果 有 偏 
差 。 而 使 用 DIV+CSS 的 制作 方法 ， 将 所 有 页 面 或 所 有 区 域 统 一 用 CSS 文件 控制 ， 就 避免 了 不 同 区 
域 或 不 同 页 面体 现 出 的 效果 偏差 。 

浏览 者 和 浏览 器 更 具 亲 和 力 。 由 于 CSS 富 含 丰富 的 样式 ， 使 页 面 更 具 灵 活性 ， 它 可 以 根据 不 同 的 浏览 
器 ， 而 达到 显示 效果 的 统一 和 不 变形 。 

使 页 面 载 入 得 更 快 。 页 面体 积 变 小 ， 浏 览 速度 变 快 ， 由 于 将 大 部 分 页 面 代码 写 在 了 CSS 当中， 使 得 页 
面体 积 容量 变 得 更 小 。 相 对 于 表格 嵌 套 的 方式 ，DIV+CSS 将 页 面 独 立成 更 多 的 区 域 ， 在 打开 页 面 
的 时 候 ， 逐 层 加 载 。 而 不 像 表 格 谱 套 那样 ， 将 整个 页 面 圈 在 一 个 大 表格 里 ， 使 得 加 载 速度 很 慢 。 

修改 设计 时 更 有 效率 。 由 于 使 用 了 DIV+CSS 制作 方法 ， 使 内 容 和 结构 分 离 ， 在 修改 页 面 的 时 候 更 加 省 
时 。 根 据 区 域内 容 标记 ， 到 CSS 里 找到 相应 的 ID， 使 得 修改 页 面 的 时 候 更 加 方便 ， 也 不 会 破坏 页 
面 其 他 部 分 的 布局 样式 ， 在 团队 开发 中 更 容易 分 工 合作 而 减少 相互 关联 性 。 

符合 W3C 标准 ， 保 证 网 站 不 会 因为 将 来 网 络 应 用 的 升级 而 被 淘汰 。 
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xS 学习 指引 


在 前 面 的 章节 中 ， 已 经 介绍 了 如 何 使 用 CSS 样式 来 控制 网 页 中 的 各 种 元 素 ， 本 章 将 介绍 盒子 模型 和 网 
页 布局 ， 来 提高 读者 的 网 页 设计 技巧 。 


SP 重点 导读 


。 掌握 金 子 模型 。 

。 掌 握 添加 阴影 的 方法 。 
* 掌握 布局 相关 属性 。 

。 掌 握 多 列 显示 样式 。 
“掌握 弹性 和 布局 。 


12.1 认识 盒子 模型 


在 HIML 中 每 个 元 素 都 包含 在 一 个 矩形 框 内 , 这 个 矩形 框 就 是 盒子 模型 盒子 模 型 由 margin( 外 边界 )、 
border (边框 )、padding( 内 边界 ) 和 content (内 容 ) 组 成 ， 如 图 12-1 所 示 。 


margin-top 


padding-top 


margin-left 


316u-uiBJew 


margin-bottom 


图 12-1 盒子 模型 的 组 成 
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12.1.1 盒子 的 边框 属性 


border 属性 是 盒子 的 边框 属性 , 它 由 border-width( 边 框 的 宽度 ).border-style( 边 框 的 线形 ) 和 border-color 
(边框 的 颜色 ) 组 成 ， 语 法 格式 如 下 ; 


border: border-width border-color border-style 


【 例 12-1】 (实例 文件 ，chl2\Chap12.1html) 盒子 的 边框 属性 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
div{ 
width: 100px; 
height: 100px; 
border: 3px solid red; 


小 
</style> 
</head> 
<body> 
<div> 边 框 属性 </div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.1.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-2 所 示 。 


国 csersWdminierrat 训 


文件 站 ”关中 一 看 V) 收藏 和) 工具 | 


图 12-2 盒子 边框 


12.1.2 ”盒子 的 内 边 距 属性 
padding 属性 是 盒子 的 内 边 距 ， 可 以 用 来 定义 内 容 与 边框 之 间 的 距离 。 语 法 格式 如 下 ; 


padding: length; 
padding 属性 可 以 是 一 个 具体 的 长 度 值 ， 也 可 以 是 一 个 相对 于 上 级 元 素 的 百分比 值 ， 但 不 可 以 使 用 负 值 。 
padding 属性 有 4 个 子 属性 ， 如 表 12-1 所 示 。 


表 12-1 padding 属性 


属 性 说 明 
padding-top 设置 内 容 与 边框 上 边 的 距离 
padding-bottom 设置 内 容 与 边框 底 边 的 距离 
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4 


| e+ 说 明 
padding-right 设置 内 容 与 边框 右边 的 距离 
padding-left 设置 内 容 与 边框 左边 的 距离 


【 例 12-2】 (实例 文件 ，ch12\Chap12.2.html) 盒 子 的 内 边 距 属性 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
-box1{ 
border:1px solid red; 
} 
-box21{ 
border:1px solid red; /* 设 置 边框 */ 
padding-top: 10px; /* 设 置 上 边 的 内 边 距 */ 
padding-bottom: 20px; /* 设 置 底 边 的 内 边 距 */ 
padding-right: 30px; /# 设 置 右边 的 内 边 距 */ 
padding-left: 30px; /* 设 置 左边 的 内 边 距 */ 
} 
</style> 
</head> 
<body> 


<p><span class="boxl"> 没 有 设置 内 边 距 的 盒子 </span></p> 
<p><span class="box2"> 设 置 内 边 距 的 金子 </span></p> 


</body> 
</html> 
相关 的 代码 实例 请 参考 Chap12.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-3 所 示 。 
证 
司 chsersWdminisvat 了 | 辣 cNueerevdmais 


oa] 


及 有 设置 内 边 距 的 盒 


Ee fiopx 
一 设置 内 边 距 的 盒子 


+ 200x 


30px 


RI 7 


图 12-3 盒子 的 内 边 距 


12.1.3 ”盒子 的 外 边 距 属性 
margin 属性 用 于 设置 页 面 中 元 素 与 元 素 之 间 的 距离 。margin 属性 的 语法 如 下 : 


margin: auto | length 


auto 表示 根据 内 容 自 动 调整 ，length 表示 长 度 值 或 者 是 百分比 值 。 
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margin 属性 包含 4 个 子 属 性 ， 分 别 用 于 控制 元 素 四 周 的 边 距 ， 如 表 12-2 所 示 。 


表 12-2 margin 属性 


属 性 说 明 

margin-top 设置 盒子 上 边框 距离 上 面 外 边 距 的 距离 

margin-bottom 设置 盒子 底 边框 距离 底面 外 边 距 的 距离 

margin-right 设置 盒子 右边 框 距离 右面 外 边 距 的 距离 
设置 盒子 左边 框 距离 左面 外 边 距 的 距离 


margin-left 


【 例 12-3】〔 实 例文 件 ，ch12\Chap12.3.html) 盒子 的 外 边 距 属 性 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
-box1{ 
border: lpx solid red; 
} 
-box21 
border: lpx solid red; 
margin-top:50px; /* 设 置 上 边 的 外 边 距 */ 
下 
</style> 
</head> 
<body> 
<div class="boxl">boxl</div> 
<div class="box2">box2</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-4 所 示 。 


= 下 芝 
司 CNserswAdministat P -上 cA 
文 作 站 。 蜀 剖 日 。 直 看 NM。 收藏 = 内 工 RD 有 


| |] 


4 so 


E 


成 100% ~ 


图 12-4 盒子 的 外 边 距 


12.1.4 ”盒子 的 宽 和 高 


为 了 正确 设置 元 素 在 所 有 浏览 器 中 
盒 模型 高 度 与 宽度 的 方法 。 
【 例 12-4】 实例 文件 ，ch12\Chap12.4.html) 计算 盒 模型 中 元 素 的 总 宽度 。 


甘 


的 宽度 和 高 度 ， 用 户 需 要 知道 盒 模型 是 如 何 工作 的 。 下 面 介绍 计算 
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<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
div { 
background-color: lightgrey; 
width: 300px; /* 设 置 盒子 的 宽度 */ 
border: 25px solid green; 
padding: 25px; 
margin: 25px; 
下 
</style> 
</head> 
<body> 
<h2> 盒 子 模型 演示 </h2> 
<p>CcSS 盒 模型 本 质 上 是 一 个 盒子 ,封装 周围 的 HTML 元 素 , 它 包括 : 边 距 , 边 框 ,填充 和 实际 内 容 。</P> 
<div> 这 里 是 盒子 内 的 实际 内 容 。 有 25px 内 间距 , 25px 外 间距 、25px 绿色 边框 。</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.4.html 文 件 , 在 正 浏览 器 中 运行 的 结果 如 图 12-5 所 示 。 这 里 自己 算 算 ; 
300px〈 宽 ) +50px 〈 左 + 右 填 充 ) +50px 〈 左 + 右边 框 ) +50px 〈 左 + 右边 距 ) =450px， 因 此 这 里 总 元 素 的 宽 
度 为 450px。 


Ls 口 x 
间 caUsersWdministrat P -上 | 大 Tiie .| 
文件 () 。 竟 恕 (5) ”查看 (V) 站 臣 交 (A) 工具 (T) 帮 动 (H) 


盒子 模型 党 示 


GSS 富 模型 本 后 上 ; a 震 壬 同 国 的 HIM 元 宁 ; 它 包 括 ， 
边 距 ， 边 框 ,填充 和 实际 内 : 


这 里 是 盒子 内 的 实际 内 容 ， 有 25px 内 间 
距 ，25px 外 间距 、25px 绿 色 边 框 。 


盈 1005 7 


图 12-5 计算 盒子 模型 的 宽度 


根据 上 面 的 计算 ， 可 以 得 出 计算 盒子 模型 高 度 与 宽度 的 方法 。 
元 素 的 总 宽度 计算 公式 如 下 : 
总 元 素 的 宽度 = 宽度 + 左 填 充 + 右 填充 + 左边 框 + 右边 框 + 左边 距 + 右 边 距 

元 素 的 总 高 度 计算 公式 如 下 
总 元 素 的 高 度 = 高 度 + 顶部 填充 4 底部 填充 + 上 边框 + 下 边框 ;上边 距 + 下 边 距 


二 


才 


12.2 ”添加 盒 阴影 


CSS 3 中 新 增加 了 为 盒子 添加 阴影 的 属性 box-shadow， 通 过 该 属性 可 以 轻松 实现 网 页 中 元 素 的 阴影 效果 。 
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12.2.1 使 用 box-shadow 属性 为 盒子 添加 阴影 


box-shadow 属性 可 以 为 元 素 添加 阴影 。 该 属性 有 6 个 参数 值 : 阴影 类 型 、 水 平 偏 移 长 度 、 垂 
度 、 模 糊 距离 、 阴 影 大 小 和 阴影 颜色 ， 其 中 水 平 偏 移 长 度 和 垂直 偏 移 长 度 是 必须 的 ， 其 他 的 参数 可 以 有 选 
择 地 省 略 。 语 法 如 下 ; 

box-shadow:X Y blur spread color inset; 


box-shadow 的 相关 属性 值 及 说 明 如 表 12-3 所 示 。 


表 12-3 ”box-shadow 属性 值 及 说 明 


属 性 值 说 明 
x 水 平 阴影 的 长 度 
等 垂直 阴影 的 长 度 
blur 模糊 距离 
spread 阴影 的 尺寸 
color 阴影 的 颜色 
inset 设置 为 内 部 阴影 
【 例 12-5】 实例 文件 ，ch12\Chap12.5.html) 为 盒子 添加 阴影 。 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
div{ 
width: 100px; 
height: 100px; 
border: lpx solid red; 
box-shadow: 5px 5px 5px blue; 。 /* 设 置 盒子 的 阴影 */ 
</style> 
</head> 
<body> 
<div>box-shadow</div> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap12.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-6 所 示 。 


口 x 
下 cuersuanmsw De] 总 | 
HN MM BEV aN TRM 


| -shadow | 
一 aas ~ 


图 12-6 ”为 盒子 添加 阴影 
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12.2.2 ”为 表格 及 单元 格 添加 阴影 


对 表格 及 单元 格 添加 阴影 ， 也 是 通过 box-shadow 属性 来 添加 。 
给 表格 添加 阴影 ， 如 下 面 案 例 所 示 。 
【 例 12-6】 (实例 文件 ，ch12\Chap12.6.html) 为 表格 和 单元 格 添加 阴影 。 


相关 的 代码 实例 请 参考 Chap12.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-7 所 示 。 
给 单元 格 添加 阴影 ， 参 考 案例 【 例 12-6 】， 只 需 把 <style></style> 标 签 内 容 换 成 以 下 代码 ， 在 正 浏览 
器 中 运行 的 结果 如 图 12-8 所 示 。 


图 12-7 为 表格 添加 阴影 图 12-8 为 单元 格 添加 阴影 
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12.3 布局 的 相关 属性 
本 节 来 介绍 一 下 CSS 中 布局 的 一 些 相关 属性 。 


12.3.1 实现 换行 


在 HIML 中 使 用 <br> 标 签 来 实现 简单 的 换行 ，<br> 标 签 插入 的 位 置 就 是 换行 的 开始 位 置 ， 可 以 作用 了 
标签 或 者 是 文本 内 容 。 

在 CSS 中 可 以 使 用 “浮动 ”和 clear 属性 来 实现 换行 。 在 下 面 的 【 例 12-7 】 中， 让 第 二 个 span 元 素 
换行 。 

【 例 12-7】 (实例 文件 ， chl2\Chap12.7.html) 实现 换行 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
span{ 
float: left; /* 设 置 左 浮动 */ 
border: lpx solid red; 
margin: 20px; 
} 
-box{ 
clear:both; /* 清 除 .box 的 浮动 */ 
</style> 
</head> 
<body> 


<span> 合 子 1</span> 

<span class="box"> 盒 子 2</span> 
<span> 盒 子 3</span> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap12.7.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-9 所 示 。 


-Es 
司 GusersAdministat PD- 0 | 四 
文件 昌 。 篇 三 E)， 下 看 M) 收音 闪 ( 凡 工具 [ “ 


Ea 
Es 医 了 3 
图 12-9 换行 效果 


12.3.2 ”设置 滚动 条 


回 
在 HIML 中 可 以 使 用 “overflow:auto:” 和 “overflow:scroll: ”这 两 个 属性 给 需要 设置 滚动 条 的 元 素 添 加 ， 
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它们 两 者 的 区 别 是 : “overflow:auto:” 属 性 对 于 内 容 超出 对 象 的 尺寸 时 才 会 显示 滚动 条 , 而 “overflow:scroll:” 
属性 ， 无 论 内 容 是 否 超出 对 象 的 尺寸 ， 滚 动 条 都 是 一 直 存在 的 。 
【 例 12-8】 实例 文件 ，ch12\Chap12.8.html) 设置 滚动 条 。 


相关 的 代码 实例 请 参考 Chap12.8.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-10 所 示 。 
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- OO x 
司 cNuxersvdminisa PP - C | 屋 cNusersAdminisua .| 
文件 昌 ” 转 有 日 ”查看 MI 收 茂 夫 内 ”工具 帮 勒 (H) 


bi auto: 内 容 没有 起 erflow: auto; 内 容 超出 
对 象 y 象 ! 内 容 下 出 对 象 ! 


rilow: auto; 内 容 没有 起 rflow: autc; 内 容 超出 
be ! 内 容 超出 对 象 ! 


rilow: auto; 内 容 超出 
3 象 ! 内 容 想 出 对 象 ! 


erilow: scrolkt 内 容 没有 erflow: scrolk 内 容 超 出 
上 各! 内容 起 出 对 象 ! 


Pe scrolk 内 容 没 有 rflow: scrolt 内 容 超出 | 
出 对 象 ! 内 容 超出 对 象 ! 


时 象 ! 内 容 超出 对 象 ! 


人 scroll; 内 容 超出 


夸 110% ~ 


12-10 ”设置 滚动 条 


12.3.3 ”控制 滚动 方式 


还 可 以 为 有 滚动 条 的 元 素 添 加 “overflow:hidden; ”属性 来 控制 滚动 条 的 滚动 方式 ， 它 有 两 个 子 属性 ， 
如 表 12-4 所 示 。 


表 12-4 overflow:hidden 属性 


属 性 说 明 
overflow-x:hidden 禁止 横向 滚动 
overflow-y:hidden 禁止 垂直 滚动 


【 例 12-9】 (实例 文件 ， chl2\Chap12.9.html) 控制 滚动 方式 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
-box1{ 
width: 150px; 
height: 150px; 
border: lpx solid red; 
overflow-y:hidden; /*# 禁 止 垂 直 滚动 */ 
float: left; 
-box21 
width: 150px; 
height: 150px; 
border: lpx solid red; 
overflow-x:hidden; /* 禁 止 水 平 滚动 */ 
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~ 


float: left; 
margin-left: 15px; 
Y 

</style> 

</head> 

<body> 

<div class="boxl"> 
<p> 横 向 滚动 ! 111111111111111111</p> 
<p> 横 向 滚动 ! 111111111111111111</p> 
<p> 横 向 滚动 ! 111111111111111111</p> 
<p> 横 向 滚动 ! 111111111111111111</p> 

</div> 

<div class="box2"> 
<p> 坚 向 滚动 ! 222222222222222222</p> 
<p> 坚 向 滚动 ! 222222222222222222</p> 
<p> 坚 向 滚动 ! 222222222222222222</P> 
<p> 坚 向 滚动 ! 222222222222222222</p> 


</div> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap12.9.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-11 所 示 。 


= 面 这 
司 CNusersAdmiristrat P -上 | BTte 
文件 站。 稀 六 (E] 王 看 WV) 收 基 夫 A) 工具 站。 和 到 (H| 


向 滚动 ! 
111111111111111 


向 滚动 ! 
111111111111111 


overflow-y:hidden; ‘overflow-x:hidden; 


或 110% ~ 


图 12-11 ”控制 滚动 条 的 滚动 方式 


12.3.4 “控制 裁剪 


在 CSS 中 , clip 属性 用 于 对 绝对 定位 的 元 素 进行 裁剪 ,clip 可 以 通过 rect0 在 元 素 中 指定 一 个 矩形 区 域 ， 
区 域内 的 内 容 可 以 显示 ， 和 矩形 外 的 隐藏 。 假 如 使 用 rect(a b c 四 对 元 素 进行 裁剪 ， 每 个 值 所 对 应 元 素 的 边框 
如 图 12-12 所 示 。 


图 12-12 ”裁剪 示意 图 
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【 例 12-10】 实例 文件 ，ch12\Chap12.10.html) 控 制裁 剪 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
-dt 
position: absolute; 
clip: rect(30px 150px 200px 30px); /* 用 rect() 方 法 裁剪 图 片 */ 
</style> 
</head> 
<body> 


<img src="80161936206485649.jpg" alt=""> 
<img src="80161936206485649.jpg" alt=""class="d"> 


</body> 

</html> 

相关 的 代码 实例 请 参考 Chap12.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-13 所 示 。 
i ne 


ZH) WHY EV CAN IAM Woo 
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图 12-13 控制 裁剪 


12.4 ”设置 多 列 显示 样式 


CSS 3 新 增 的 columns 属性 ， 用 于 定义 多 列 布局 。 多 列 布局 是 网 页 中 块 状 布局 模式 的 有 力 扩 展 , 能够 让 
开发 者 轻松 地 使 文本 呈 多 列 显示 。 

1. 设置 列 宽 

column-width 属性 用 于 定义 多 列 布局 中 每 列 ， 语 法 如 下 


column-width:1length; 
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length 属性 值 用 于 指定 列 的 宽度 ， 不 可 以 为 负 值 。 


2. 设置 列 数 
column-count 属性 ， 用 于 定义 多 列 布局 的 列 数 ， 而 不 需要 通过 列 宽度 自动 调整 列 数 ， 语 法 如 下 面 的 代码 


所 示 : 


column-count :number; 

number 属性 值 用 于 指定 多 列 的 列 数 ， 取 值 为 大 于 0 的 整数 。 

3. 设置 列 间 距 

column-gap 属性 用 于 设置 列 与 列 之 间 的 距离 ， 从 而 更 好 地 去 控制 多 列 布局 的 内 容 和 版 式 。 语 法 如 下 面 的 


代码 所 示 : 


194 


column-gap:length; 


length 属性 值 用 于 定义 列 与 列 之 间 的 距离 ， 取 值 不 可 以 为 负 值 。 


4. 设置 列 分 割 线 
column-rule 属性 用 于 设置 列 的 分 割 线 ， 语 法 如 下 面 的 代码 所 示 : 
column-rule:width style color; 


width 属性 值 设置 分 割 线 的 宽度 ，style 属性 值 设置 分 割 线 的 样式 ，color 设置 分 割 线 的 颜色 。 


5. 设置 跨 列 显示 

column-span 属性 用 于 设置 元 素 跨 列 显 示 ， 代 码 如 下 : 
column-span:all; 

all 属性 值 表示 元 素 横 跨 所 有 列 。 

【 例 12-11】 〈 实 例文 件 ，chl2\Chap12.11.html) 跨 列 显 示 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
div{ 
column-width: 150px; /* 设 置 列 宽 */ 
column-count: 37 /* 设 置 列 数 */ 
column-gap:20px; /* 设 置 列 间 肥 */ 
column-rule:lpx red solid; /* 设 置 分 割 线 的 样式 */ 
让 
h2{ 
column-span: all; /* 设 置 跨 列 显示 */ 
background: green; 
color:white; 
} 
</style> 
</head> 
<body> 
<div> 
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<h2> 匆 匆 </h2> 
燕子 去 了 ,有 再 来 的 时 候 ; 杨柳 枯 了 , 有 再 青 的 时 候 ;桃花 谢 了 , 有 再 开 的 时 候 。 但 是 , 聪明 的 ,你 告诉 我 ,我 们 的 日 子 为 什么 
一 去 不 复 返 呢 ? 是 有 人 偷 了 他 们 罢 : 那 是 谁 ? 又 藏 在 何 处 呢 ? 是 他 们 自己 逃走 了 罢 : 现在 又 到 了 哪里 呢 ? 我 不 知道 他 们 给 了 我 多 少 
日 子 ;但 我 的 手 确 乎 是 渐渐 空虚 了 。 
选 自 --《 朱 自 清 散 文集 》 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-14 所 示 。 


- OO x 
站 GAUsersAdmiristmtonDesk OD 0 | @ CAUcerAdminictraton x | 下 [3 
文件 (。 壤 (E) 查看 V) 由 (A】 工具 mT) 帮 动 H) 
燕子 去 了 ， 有 再 来 的 什 ?是 有 | 了 > 日 子 ; 了 
候 ; 杨柳 枯 了 ， 有 再 青 的 ”人 们 罢 : 那 是 讨 时 了 。 选 自 
桃花 谢 了 ， 有 再 开 | 又 i 一 《朱自清 | 
。 但 是 ， 聪 明 的 ， 己 透 走 现 
你 告诉 我 ， 我 们 的 日 子 为 | 哪里 昵 ? 我 不 知道 他 们 给 
R10% > 


12-14” 跨 列 显示 效果 


12.5 ”使 用 弹性 盒 布局 


CSS 3 引入 了 新 的 盒 模型 处 理 机 制 一 一 弹性 盒 模型 。 引 入 弹性 盒 布局 模型 的 目的 是 实现 盒 元 素 内 部 的 
多 种 布局 ， 包 括 排列 方向 、 排 列 顺序 、 空 间 分 配 和 对 其 方式 等 。 现 在 大 多 的 主流 浏览 器 还 不 支持 弹性 盒 布 
局 ， 基 于 webkit 内 核 的 浏览 器 ， 需 要 加 上 前 级-webkit-， 基 于 gecko 内 核 的 浏览 器 ， 需 要 加 上 前 级 -moz-。 
CSS 3 为 弹性 盒 布局 样式 ， 新 增 了 8 个 属性 ， 如 表 12-5 所 示 。 


表 12-5 CSS 3 新 增 盒子 模型 属性 


属 性 名 说 明 

box-orient 定义 盒子 分 布 的 坐标 轴 

box-align 定义 子 元 素 在 盒子 内 垂直 方向 上 的 空间 分 配方 式 
box-direction 定义 盒子 的 显示 顺序 

box-flex 定义 子 元 素 在 盒子 内 的 自 适应 尺寸 

box-flex-group 将 自 适应 元 素 分 配 到 柔性 分 组 

box-lines 定义 子 元 素 分 布 显示 

box-ordinal-group 定义 子 元 素 在 盒子 内 的 显示 位 置 

box-pack 定义 子 元 素 在 盒子 内 的 水 平方 向 上 的 空间 分 配方 式 
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5.1 使 用 flex 类 型 的 盒 模型 
flex 布局 ， 可 以 简便 、 完 整 、 响 应 式 地 实现 各 种 页 面 布局 。flex 是 Flexible Box 的 缩写 ， 意 为 “弹性 布局 ”， 


用 来 为 盒 模 型 提供 最 大 的 灵活 性 .任何 一 个 容器 都 可 以 指定 为 flex 布局 , 设 为 flex 布局 以 后 , 子 元 素 的 float、 
clear 和 vertical-align 属性 将 失效 。 
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5.2 ”定义 盒 内 元 素 的 排列 方向 


box-orient 属性 用 于 定义 盒子 元 素 内 部 的 流动 布局 方向 ， 包 括 横 排 (horizontal) 和 竖 排 (vertical) 两 种 。 
语法 格式 如 下 所 示 : 
box-orient: horizontal | vertical | inline-axis | block-axis | inherit 


box-orient 属性 值 如 表 12-6 所 示 。 


表 12-6 ”box-orient 属性 值 


属 性 值 说 明 

horizontal 盒子 元 素 从 左 到 右 在 一 条 水 平 线 上 显示 它 的 子 元 素 
vertical 盒子 元 素 从 上 到 下 在 一 条 垂直 线 上 显示 它 的 子 元 素 
inline-axis 盒子 元 素 沿 着 内 联 轴 显 示 它 的 子 元 素 

block-axis 盒子 元 素 沿 着 块 轴 显 示 它 的 子 元 素 


【 例 12-12】 〈 实 例文 件 ，ch12\Chap12.12.html) 使 用 box-orient 属性 设置 盒子 元 素 水 平 并 列 显示 1。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title> </title> 
<style> 
div{ 
height:100px;text-align:center; font-size: S50px; 
color: white;line-height: 100px; width:600px; 
} 
-divi{background-color:#00F5FF;} 
-div2{background-color:#00FF7F;} 
-div3{background-color:#FF69B4;} 


body{ 
display:box; /* 标 准 声明 ,盒子 显示 */ 
display:-moz-box; /* 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
box-orient:vertical; /* 定 义 元 素 为 盒子 显示 */ 
-moz-box-orient:Vertical7 /# 兼 容 Mozilla Gecko 引擎 浏览 器 */ 
入 
</style> 
</head> 


<body> 
<div class="divl"> 上 </div> 
<div class="div2"> 中 </div> 
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<div class="div3"> 下 </div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.12.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-15 所 示 。 


®@* 


Dr re 上 |、 
文件 (站 锻 名 (E) 去 硅 (V】 农 束 夫 (A) 工兵 (1) 大 印 (H) 


二 100% ~ 


12-15 盒子 元 素 水 平 并 列 显示 效果 1 


在 弹性 盒子 里 ， 元 素 默认 是 水 平 排列 ， 在 元 素 中 添加 box-orient:vertical 属性 类 别 ， 这 时 元 素 会 垂直 排列 。 


12.5.3 ”控制 换行 

在 默认 情况 下 ,项 目 都 排 在 一 条 线 (又 称 “ 轴 线 ”) 上 。flex-wrap 属性 定义 ， 如 果 一 条 轴线 排 不 下 ， 
何 换行 。 

flex-wrap 属性 用 于 指定 弹性 盒子 的 子 元 素 换行 方式 ， 语 法 如 下 : 

flex-wrap: nowraplwrap1wrap-reverse 


flex-wrap 属性 值 如 表 12-7 所 示 。 
表 12-7 flex-wrap 属性 值 


属 性 值 说 明 

nowrap 默认 情况 ， 弹 性 容器 为 单行 ， 该 情况 下 弹性 子 项 可 能 会 溢出 容器 

wrap 弹性 容器 为 多 行 ， 弹 性 盒子 溢出 的 部 分 被 放置 到 下 一 行 ， 子 项 内 部 会 发 生 断 行 
wrap-reverse 与 wrap 相反 的 排列 方式 


【 例 12-13】 实例 文件 ，ch12\Chap12.13.html) 使 用 flex-wrap 属性 设置 盒子 元 素 水 平 并 列 显 示 2。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
#main { 
width: 200px; 


如 


197 


一 


\ 
Him StCSS 3+JavaSoript 从 入 站 到 项 目 实 路 ( 超 信 折 ) 


height: 150px; 
color:white; 


border: lpx solid #c3c3c3; 


display: flex; /* 声 明 弹 性 使 模型 */ 
display: -webkit-flex; /+ 兼容 webkit 引擎 浏览 器 +/ 
flex-wrap: wrap; /* 设 置 弹 性 容器 为 多 行 显示 +/ 


—webkit-flex-wrap: wrap; 
#main div { 
width: 50px; 
height: 50px7 
了 
</style> 
</head> 
<body> 
<div id="main"> 
<div style="background-color:#5cff3f;">A</div> 
<div style="background-color:#4583e6;">B</div> 
<div style="background-color:#f05lec;">C</div> 
<div style="background-color:#232e6c;">D</div> 
<div style="background-color:#fd8320;">E</div> 
<div style="background-color:#d3092f;">F</div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.13.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-16 所 示 。 
ad 口 X 


站 CUsersAdministrat P -上 | @ cNuserd 
文件 (有 篇 缕 (E) 查看 (V) 收藏 交 (A) 工具 (T) 都 助 (上 ” 


《 加 


B 
绿 100% > 


图 12-16 盒子 元 素 水 平 并 列 显示 效果 2 


12.5.4 ”定义 元 素 显示 顺序 
在 盒 布局 下 ，box-direction 可 以 设置 盒 元 素 内 部 的 排列 顺序 为 正 向 或 者 反 向 。 
语法 格式 如 下 : 
box-direction:normal | reverse | inherit 


box-direction 属性 值 如 表 12-8 所 示 。 
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表 12-8 box-direction 属性 值 


属 性 值 说 明 


正常 显示 顺序 , 即 如 果 盒子 元 素 的 box-orient 属性 值 为 horizontal, 则 其 包含 的 子 元 素 按照 从 左 到 右 的 
normal 顺序 显示 ， 即 每 个 子 元 素 的 左边 总 是 靠近 前 一 个 子 元 素 的 右边 ; 如 果 盒 子 元 素 的 box-orient 属性 值 为 
vertical， 则 其 包含 的 子 元 素 按照 从 上 到 下 的 顺序 显示 


teverse 。 | 反 向 显示 ,盒子 所 包含 的 子 元 素 的 显示 顺序 将 与 nonmal 相反 


inherit 。 | 继承 上 级 元 素 的 显示 顺序 


【 例 12-14】 《实例 文件 ，chl2\Chap12.14.html) 定义 元 素 显 示 顺 序 。 


<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
div{ 
height:50px;text-align:center; font-size:50px; 
color: white;line-height: 500px; 
-divi{background-color:#00F5FF;width:180px;height:500px} 
.div2{background-color:#00FF7F;width:600px;height:500px} 
-div3{background-color:#FF69B4;width:180px;height:500px} 


body{ 
display:box; /* 声 明 弹 性 鳃 模型 */ 
display:-moz-box; 
box-direction:reverse; /* 设 置 元 素 反 向 排列 */ 


-moz-box-direction:reverse; 
} 
</style> 
</head> 
<body> 
<div class="div1"> 左 侧 </div> 
iv2"> 中 间 </div> 
<div class="div3"> 右 侧 </div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.14.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 12-17 所 示 。 


<div class=' 


CO Dn 


图 12-17 定义 元 素 显示 顺序 
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12.5.5 ”定义 子 元 素 的 缩放 


box-flex 定义 了 子 元 素 的 空间 弹性 , 能 够 灵活 地 控制 子 元 素 在 盒子 中 的 显示 空间 。 显 示 空间 包括 子 元 素 
的 宽度 和 高 度 ， 也 可 以 说 是 子 元 素 在 盒子 中 所 占 的 面积 。 当 弹性 盒 元 素 尺 寸 缩 小 或 变 大 时 ， 子 元 素 也 会 随 
着 缩小 或 变 大 ， 弹 性 盒 元 素 多 出 的 空余 空间 ， 子 元 素 会 扩大 来 填补 空余 空间 。 
语法 格式 如 下 : 
box-flex:<number> 
<number> 属 性 值 是 一 个 整数 或 者 小 数 ， 不 可 以 为 负数 ， 默 认 值 为 0。 当 盒子 中 包含 多 个 定义 了 box-flex 
属性 的 子 元 素 时 ， 浏 览 器 将 会 把 这 些 子 元 素 的 box-flex 属性 值 相 加 ， 然 后 根据 它们 各 自 的 值 占 总 值 的 比例 
来 分 配 盒子 剩余 的 空间 。 
box-flex 属性 只 有 在 盒子 拥有 确定 的 空间 大 小 时 才能 够 正确 运用 ， 所 以 弹性 盒子 需 有 具体 的 width 和 
height 属性 值 。 
【 例 12-15】 实例 文件 ，ch12\Chap12.15.html》 定 义 子 元 素 的 缩放 。 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
body{margin:0;padding:0;text-align:center;} 
.box{ 
width:600px; font-size: 40px;color: white; 
text-align:center; overflow:hidden; 


border: lpx solid red; 


display:box; /* 标 准 声明 ,盒子 显示 */ 
display:-moz-box; /+ 兼容 Gecko 引擎 浏览 器 +/ 
} 
-box1{ 


width:800px; font-size: 40px;color: white; 
text-align:center; overflow:hidden; 
border: lpx solid red; 
display:box; /* 标 准 声明 ,合子 显示 */ 
display:-moz-box; /* 兼 容 Gecko 引擎 浏览 器 */ 
margin-top: 15px; 

} 

.divi{background-color:#F6F; -moz-box-flex:2;-moz-box-flex:2;} 

.box>div{ margin-left: Spx;height:150px;line-height: 150px; } 


-div2{-moz-box-flex: oz-box-flex:4;background-color:#3F9;} 


-moz-box-flex:2;background-color:#FCd;} 


.div3{-moz-box-flex:2; 
</style> 
</head> 
<body> 
<div class="box"> 
<div class="divl"> 左 侧 </div> 
<div class="div2"> 中 间 </div> 
<div class="div3"> 右 侧 </div> 
</div> 
<div class="boxl"> 
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<div class="divl"> 左 侧 </div> 
<div class="div2"> 中 间 </div> 
<div class="div3"> 右 侧 </div> 

</div> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap12.15.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 12-18 所 示 。 


贺 localhost53342/ 源 加/c x 四 [a] 


© © local 


左 侧 中 间 [em 


ay 中 间 


12-18 ”定义 子 元 素 的 缩放 
注意 : box-flex 只 是 动态 分 配 父 元 素 的 剩余 空间 ， 而 不 是 父 元 素 的 空间 。 如 上 面 的 文档 ， 父 元 素 .box 的 
宽度 为 800px， 如果 你 认为 divl、div2 和 div3 的 宽度 分 别 为 200px、 400px、 200px, 那 就 错 了 ， 因为 box-flex 
只 是 分 配 父 元 素 的 剩余 空间 ，div1、div2 和 div3c 所 分 到 的 应 该 是 父 元 素 内 容 以 外 所 剩余 下 来 的 宽度 。 


12.5.6 ”定义 对 齐 方式 


box-pack 属性 和 box-align 属性 ， 分 别 用 于 定义 弹性 盒 元 素 内 子 元 素 的 水 平方 向 和 垂直 方向 上 的 富余 空 
间 管 理 方式 ， 对 弹性 盒 元 素 内 部 的 文字 、 图 形 以 及 子 元 素 都 是 有 效 的 。 

box-pack 属性 可 以 用 于 设置 子 容器 在 水 平 轴 上 的 空间 分 配方 式 。 

语法 格式 如 下 : 

box-pack:startlendlcenter|justify 


box-pack 属性 值 及 说 明 如 表 12-9 所 示 。 
表 12-9 box-pack 属性 值 


属 性 值 说 明 

start 所 有 子 容器 都 分 布 在 父 容器 的 左 侧 ， 右 侧 留 空 

end 所 有 子 容器 都 分 布 在 父 容器 的 右 侧 ， 左 侧 留 空 

justify 所 有 子 容器 平均 分 布 (默认 值 ) 

center 平均 分 配 父 容器 剩余 的 空间 (能 压缩 子 容器 的 大 小 ， 并 且 有 全 局 居中 的 效果 》 


box-align 属性 用 于 管理 子 容器 在 竖 轴 上 的 空间 分 配方 式 。 
语法 格式 如 下 : 
box-align: startlendlcenterlbaseline|stretch 


box-align 属性 值 及 说 明 如 表 12-10 所 示 。 
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表 12-10 ”box-align 属性 值 


属性 值 说 上 明 

start 子 容器 从 父 容器 顶部 开始 排列 ， 富 余 空间 显示 在 盒子 底部 

| 子 宕 器 从 父 容器 底部 开始 排列 ， 富 余 空间 显示 在 盒子 项 部 

ier | 子 容器 横向 居中 ， 富 余 空间 在 子 容器 两 侧 分 配 ， 上 面 一 半 下 面 一 半 

baseline | 所 有 盒子 沿 着 它们 的 基线 排列 ， 富 余 的 空间 可 前 可 后 显示 

本 每 个 子 元 素 的 高 度 被 调整 到 适合 盒子 的 高 度 显示 ， 即 所 有 子 容器 和 父 容器 保持 同一 高 度 


元 素 垂 直 居中 显示 ， 是 老生 常 谈 的 问题 ， 但 都 不 是 很 让 人 满意 ， 需 要 大 量 代 码 ， 使 用 CSS 3 新 增 的 
box-pack、box-align 属性 ， 可 以 很 轻松 地 解决 此 问题 。 
【 例 12-16】 实例 文件 ，ch12\12.16.html) 使 用 box-pack、box-align 属性 设置 盒子 垂直 居中 。 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>box-pack, box-align</title> 
<style> 
body, html { 
height: 100%; 
width: 100%; 
3 
body { 
margin: 0; 
padding: 0; 
display: box; /*# 标 准 声明 , 盒子 显示 */ 
display: -moz-box; /+ 兼容 Mozilla Gecko 引擎 浏览 器 +/ 
box-pack: center; /*# 设 置 盒子 的 垂直 居中 */ 
-moz-box-pack: center; 
box-align: center; /* 设 置 盒子 的 水 平 居中 */ 
-moz-box-align: center; 
-box { 
width: 200px; 
height: 200px; 
background: red; 
} 
</style> 
</head> 
<body> 
<div class="box"></div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.16.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 12-19 所 示 。 
上 面 文档 中 ， 分 别 为 弹性 盒子 的 子 元 素 设置 了 box-pack:center 和 box-align:center， 轻 松 解决 了 水 平 垂 
直 居 中 的 问题 。 
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Bboupak boealign x 


@ 合 D localhost 


图 12-19 设置 盒子 垂直 居中 效果 


12.5.7 ”空间 溢出 管理 


box-lines 属性 用 来 避免 空间 溢出 的 问题 。 
语法 格式 如 下 : 
box-lines:singlelmultiple 
其 中 ， 参 数值 single 表示 子 元 素 都 单行 或 单列 显示 ，multiple 表示 子 元 素 可 以 多 行 或 多 列 显示 。 
【 例 12-17】 实例 文件 ，ch12\Chap12.17.html) 使 用 box-lines 属性 进行 空间 溢出 管理 。 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>box-lines</title> 
<style> 
-testbox { 
width: 400px; 
margin: 40px autor 
padding: 20px; 
background: #f0f3f9; 


display: -moz-box; 
display: box; 
box-lines: multiple; /*# 设 置 盒子 的 复出 管理 方式 *?/ 


-moz-box-lines: multiple7 
Y 
“ist 下 
width: 150px; 
height: 150px; 
font-size: 30px; 
color: white; 
background: red; 
margin-left: 15px; 
text-align: center; 
line-height: 150px; 
条 
</style> 
</head> 
<body> 
<div class="testbox"> 
<div class="list">1</div> 
<div class="list">2</div> 
<div class="list">3</div> 
</div> 
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\ J 


~ 


</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.17.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 12-20 所 示 。 


图 12-20 ”空间 溢出 管理 


从 上 面 的 文档 可 以 发 现 ， 设 置 box-lines 属性 没 起 作用 。 因 为 现在 所 有 疆 


E 流 浏览 器 都 不 支持 ， 所 以 不 要 


运用 该 属性 。 


12.6 ”实践 案例 


12.6.1 画册 式 网 页 布局 


画册 是 图 文 并 茂 的 一 种 理想 表达 ， 相 对 于 单一 的 文字 或 图 册 ， 画 册 有 很 大 的 优势 。 因 为 画册 够 醒目 ， 


让 人 一 目 了 然 。 下 面 就 来 实现 一 个 简单 的 画册 布局 。 
【 例 12-18】〗】《〈 实 例文 件 ，chl12\12.18.html) 画册 式 网 页 布局 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
-main{ 
border: lpx solid red; 
width: 480px; 
overflow: auto; /* 清 除 子 元 素 的 浮动 */ 
color: white; 
margin:0 auto; 
padding: 30px; 
/* 背 景 颜色 渐变 */ 


background: -o-linear-gradient (bottom right, red, blue 


); /*opera 11.1 - 12.0¢*/ 


background: linear-gradient (to bottom right，red ，blue) ; /* 标 准 的 语法 */ 


} 
-box{ 
float: left; 
margin-left: 30px; 
1} 


-boxi{ 
width: 200px; 
text-indent: 2em; /* 设 置 首 行 缩 进 2 字符 */ 
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</style> 
</head> 
<body> 
<div class="main"> 
<hl align="center"> 魔 鬼城 的 传说 </h1> 
<div class="box"> 
<div class="box1l"><p> 关 于 魔鬼 城 有 一 段 神 胡 的 传说 。 传 说 这 里 原来 是 一 座 雄伟 的 城堡, 城堡 里 的 男人 英俊 健壮 ， 
城堡 里 的 女人 美丽 而 善良 ,城堡 里 的 人 们 勤 于 劳作 , 过 着 丰衣足食 的 无 忱 生活 。</P></div> 
<div><img src="001.png" alt=""></div> 
<div class="boxl"><p> 然 而 ,伴随 着 财富 的 聚积 , 邪恶 逐渐 占据 了 人 们 的 心灵 。 
他 们 开始 变 得 沉 酒 于 玩乐 与 酒色 ,为 了 争夺 财富 , 城 里 到 处 充斥 着 尔虞我诈 与 流血 打斗 ,每 个 人 的 面孔 都 变 得 狗 狩 
丽 怖 。 
</p></div> 
</div> 
<div class="box"> 
<div class="box1l"><p> 天 神 为 了 唤起 人 们 的 良知 ,化 作 一 个 衣衫 被 实 的 乞丐 来 到 城堡 。 天 神 告 诉 人 们 ,是 邪 轴 使 
他 从 一 个 富 人 变 成 乞丐 ， 然 而 乞丐 的 话 并 没有 奏效 ,反而 遭 到 了 城堡 里 的 人 们 的 辱 虽 和 嘲讽 。</P></div> 
<img src="389411284700695685.jpg" alt=""> 
<div class="boxl"><p> 天 神 一 怒 之 下 把 这 里 变 成 了 刻 妨 ,城堡 里 所 有 的 人 都 被 压 在 刻 直 之 下 。 每 到 夜晚 ,亡魂 便 
在 城堡 内 哀 鸣 ， 希 望 天 神 能 听 到 他 们 性 悔 的 声音 。</P></div> 
</div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap12.18.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 12-21 所 示 。 


0 x 


dmiritat 万 -6 | 加 Tee 
文 拉 站 二 上 日 “下 MI， 东阳， 工具。 入 | 


麻 鬼 城 的 传说 


图 12-21 画册 式 布局 


12.6.2 ”展览 式 网 页 布局 


展览 式 网 页 布局 ， 就 是 一 张 优美 的 图 片 ， 配 上 一 些 精 美的 文字 组 成 的 。 本 案例 来 实现 一 个 简单 的 水 果 “ 
展览 式 布局 效果 。 
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【 例 12-19】 实例 文件 ，ch12\12.19.html)》 展 览 式 网 页 布局 。 
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相关 的 代码 实例 请 参考 Chap12.19.html 文件 ， 在 Firefox 浏览 器 中 运行 的 结果 如 图 12-22 所 示 。 


= 
司 cueerwdnmsa 万 - © | ETHe 
HA WEE EBV WRN _IRD wi) 
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12-22 展览 式 布局 


12.7 ”就 业 面试 技巧 与 解析 


12.7.1 ”面试 技巧 与 解析 (一) 
面试 官 ， 请 问 ， 响 应 式 布局 与 自 适应 布局 什么 区 别 ? 


应 聘 者 : 响应 式 与 自 适应 的 原理 是 相似 的 ， 都 是 检测 设备 ， 根 据 不 同 的 设备 采用 不 同 的 CSS， 而 且 
CSS 都 是 采用 的 百分比 的 ， 而 不 是 固定 的 宽度 ， 不 同 点 是 响应 式 的 模板 在 不 同 的 设备 上 看 上 去 是 不 一 样 的 ， 
会 随 着 设备 的 改变 而 改变 展示 的 样式 ， 而 自 适应 不 会 ， 所 有 的 设备 看 起 来 都 是 一 套 的 模板 ， 不 过 是 长 度 或 


者 图 片 变 大 或 变 小 ， 不 会 根据 设备 采用 不 同 的 展示 样式 。 


12.7.2 面试 技巧 与 解析 〈 二 ) 
面试 官 请 谈 谈 你 对 盒子 模型 的 理解 。 


应 聘 者 : 盒子 模型 有 两 种 ， 分 别 是 正 盒子 模型 和 W3C 盒子 模型 。W3C 盒子 模型 被 大 家 称 为 标准 盒子 


模型 ， 它 由 内 容 (content)、 填 充 (padding)、 边 框 (border) 和 边界 (margin) 四 


是 ， 正 盒子 模型 的 content 部 分 把 border 和 padding 计算 进去 了 。 


个 部 分 组 成 。 两 者 的 


区 别 
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第 13 章 
使 用 网 页 动画 效果 


7 学 习 指引 


CSS 3 新 增 了 变形 和 动画 相关 的 模块 ， 使 得 页 面 更 加 绚丽 多 彩 。 另 一 方面 ， 减 少 了 JavaScript 代码 的 书 
写 ， 在 CSS 3 以 前 ， 实 现 相同 效果 需要 大 段 的 JavaScript 代码 ， 而 使 用 CSS 3 新 增 的 属性 ， 很 简单 便 可 以 
实现 。 本 章 将 向 读者 详细 介绍 transform、transition 和 animation 等 新 增 属性 。 


二 ”重点 导读 


。 了 解 HTML 5 的 概述 。 

。 熟 悉 HTML 5 的 特殊 之 处 。 

。 熟 秋 HTML 5 在 iOS 和 Android 设备 中 的 使 用 。 
。 了 解 HIML 5 移动 开发 辅助 工具 。 


13.1 定义 2D 变形 动画 


Transform 用 于 定义 2D 变形 动画 ， 通 过 指定 它 的 变形 函数 ， 即 可 实现 对 HTML 元 素 的 变形 。 但 需要 注 
意 的 是 , 目前 的 主流 浏览 器 还 不 完全 支持 CSS 3 新 增 属性 ， 因 此 在 开发 中 还 需要 添加 各 浏览 器 厂商 的 前 缀 ， 
如 -moz-、-webkit-、-0-、-ms- 等 前 缀 。 


13.1.1 ”定义 旋转 动画 
Transform 属性 中 rotate0 属 性 值 用 来 定义 2D 旋转 动画 ， 在 参数 中 可 以 规定 角度 。 
【 例 13-1】 〈 实 例文 件 ，ch013\Chap13.1.html) 定义 旋转 动画 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


第 国 章 使 用 网 页 动画 效果 


相关 的 代码 实例 请 参考 Chap13.1.html 文件 ， 在 IE 浏览 器 中 运行 的 结果 如 图 13-1 所 示 。 当 把 鼠标 指针 
悬浮 在 div 上 时 ， 旋 转动 画 效果 如 图 13-2 所 示 。 


2D 旋 转 


图 13-2 ”旋转 动画 效果 
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蝇 13.1.2 ”定义 缩放 动画 


Transform 属性 中 属性 值 scale(x.y) 用 来 定义 2D 缩放 动画 ，x 表示 开 轴 方向 上 的 缩放 ，y 表示 了 轴 方 向 
【 例 13-2】 (实例 文件 ，ch013\Chap13.2.html) 定义 缩放 动画 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 


<style> 

div{ 
width: 100px; 
height: 100px; 
background: red; 
color: white; 
margin:50px 50px; 

,| 

div:hover{ 


/* 沿 X 轴 放 大 到 1.5 倍 , 沿 Y 轴 缩小 到 0.8 倍 *+/ 


transform: scale(1.5,0.8); /* 设 置 2D 缩放 动画 #/ 
-ms-transform: scale(1.5,0.8); /+ 兼容 Trident 内 核 浏览 器 */ 
</style> 

</head> 

<body> 

<div>2D 缩放 </div> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap13.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-3 所 示 。 当 把 鼠标 指针 
悬浮 在 div 上 时 ， 缩 放 动 画 效果 如 图 13-4 所 示 。 


-> = 本 本 
加 Ccere Aamirictrat P ~ 司 CNWUeerewdmrictrat P ~ 

文件 (月 亏 夸 E) 查 咯 V] 以 (A 友 件 月。 雪 读 E) 下 者 VM 克 A) ” 
a A 

v v 

入 100% vv 各 100% 

图 13-3 加载 完成 效果 图 13-4 ”缩放 动画 效果 


Transform 属性 中 属性 值 ranslate(x.y) 定 义 2D 移动 动画 ,xX 表 示 工 轴 方 向 上 的 移动 , 表示 了 轴 方 向 的 
移动 。 
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【 例 13-3】 (实例 文件 ，ch013\Chap13.3.html) 定义 移动 动画 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 

div{ 

width: 100px7 
height: 100px; 
background: red; 
color: white; 

} 
p{background:yellow;} 
div:hover{ 

/* 沿 三 轴 移动 50px, 沿 Y 轴 移动 50px*/ 


transform: translate(50px,50px); 


-ms-transform: translate(50px,50px); 


} 

</style> 
</head> 
<body> 
<p>2D 移动 </p> 
<div></div> 
</body> 
</html> 


/* 设 置 2D 移动 动画 */ 


/+ 兼容 Trident 内 核 浏览 器 */ 


相关 的 代码 实例 请 参考 Chap13.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-5 所 示 。 当 把 鼠标 指针 


悬浮 在 div 上 时 ， 移 动 动画 效果 如 图 13-6 所 示 。 


- oO 
| 于 GWueerswdrinarat PD ~ © 


六 必 朋 过 沁 (本 硬 MV 必 下 (A) 工具 


图 13-5 ”加载 完成 效果 


13.1.4 ”定义 倾斜 动画 


- OO x 

四 cueerwdninantP ~ © 

Ec 工 局 
本 1006 ~ 


图 13-6 ”移动 动画 效果 


Transform 属性 中 属性 值 skew(x.y) 定 义 2D 倾斜 动画 , x 表示 开 轴 方向 上 的 倾斜 , y 表示 了 轴 方 向 的 倾斜 。 
【 例 13-4】 (实例 文件 ， ch013\Chap13.4html) 定义 倾斜 动画 。 


<!DOCTYPE html> 
<html> 
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<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
div{ 
width: 100px; 
height: 100px; 
background: red; 
color: white; 
margin:15px 15px; 
div:hover{ 
transform: skew(l5deg,15deg); /* 设 置 2D 倾 射 动画 */ 
-ms-transform: skew(15deg,15deg) 7 /+ 兼容 Trident 内 核 浏览 器 */ 
和 
</style> 
</head> 
<body> 
<div>2D 倾斜 </div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.4.html 文件 ， 在 焉 浏览 器 中 运行 的 结果 如 图 13-7 所 示 。 当 把 鼠标 指针 
悬浮 在 div 上 时 ， 倾 斜 动画 效果 如 图 13-8 所 示 。 


- 0O x oO x 
由 cueerewdminicrat © 司 cuuoerswdminisra 局 
SH) WlE) EBV) Wm” 文件 站” 将 (E) 二 看 MV) 收 束 夫 )” 


图 13-7 ”加 载 完成 效果 图 13-8 ”倾斜 动画 效果 


国光 


人 13.1.5 ”定义 矩阵 动画 


矩阵 动画 可 以 通过 设置 transform 属性 值 为 matrix0 函 数 来 实现 。matrix0 函 数 用 于 定义 页 面 元 素 在 二 维 
空间 中 的 矩阵 变形 动画 。 语 法 如 下 : 

transform: matrix(a,b,c,d,x,y); 

前 面 介绍 的 旋转 、 拉 伸 、 位 移 、 倾 斜 这 些 变形 效果 ， 都 可 以 看 作 是 矩阵 变形 的 例子 。 

旋转 rotate(A): 相当 于 和 矩 阵 变形 matrix(cosA.sinA,-sinA.cosA.0.0)。 

移动 translate(dx.dy): 相当 于 甜 阵 变形 matrix(1.0.0.1.dx.dy)。 

缩放 scale(sx,sy): 相当 于 和 矩阵 变形 matrix(sx.0,0.sy.0.0)。 

倾斜 skew(B): 相当 于 矩阵 变形 matrix(1,tan(By),tan(Bx).1.0.0)， 其 中 tan(By) 是 了 轴 方 向 上 的 倾斜 。 

关于 详细 的 矩阵 变形 原理 ， 这 里 就 不 做 介绍 了 ， 需 要 参考 数学 相关 的 知识 。 


212 


第 国 章 使 用 网 页 动画 效果 


【 例 13-5】 (实例 文件 ，ch013\Chap13.5html) 定义 矩阵 动画 。 
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<div class="box3"> 缩 放 </div> 
<div class="box4"> 倾 斜 </div> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap13.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-9 所 示 。 
记 = | 


司 CAUsersAdministrat 吕 -上 | 车 CNuserswdmnisya. . 人 @| 


文件 ( 。 篇 回 (E) ”查看 (V)】 收 感 夫人) ”工具 (D 。 孝 助 (H) | 


各 100% 7 中 


图 13-9 和 矩阵 动画 效果 


13.2 自 定 义 2D 变换 
在 前 面 几 节 中 介绍 了 transform 属性 的 一 些 2D 转换 动画 ， 下 面 来 使 用 它们 创建 一 些 动画 效果 。 
13.2.1 自 定 义 变换 动画 


下 面 利用 上 面 所 讲 的 四 种 变换 效果 来 实现 一 个 简单 的 效果 ， 并 添加 一 些 简单 的 样式 。 
【 例 13-6】 〈 实 例文 件 ，ch013\Chap13.6.html) 自 定义 变换 动画 。 


<!DOCTYPE html> 


<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
#box{ 
border: lpx solid blue; 
width: 600px; 
height: 200px; 
cursor:pointer; /* 设 置 鼠标 指针 的 显示 类 型 */ 
} 
div{ 


width: 100px; 
height: 100px; 
background: red; 
color: white; 
margin:15px 15px; 
float: left; 


text-align: center; 
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line-height: 100px; 
} 
#box:hover div:first-of-type{ 
transform:rotate (45deg); /* 定 义 2D 旋转 动画 */ 
-ms-transform: rotate(45deg); 
border-radius: 50% ; 
} 
#box:hover div:nth-of-type (2){ 
transform: translate (0px,30px); /* 定 义 2D 移动 动画 */ 
-ms-transform: translate (Opx,30px); 
border-radius: 50% ; 
} 
#box:hover div:nth-of-type (3){ 
transform: skew(30deg,15deg); /* 定 义 2D 倾斜 动画 */ 
-ms-transform: skew(15deg,15deg)7 
border-radius: 50% ; 
} 
#box:hover div:last-of-type{ 
transform: scale(0.7,1.2); /* 定 义 2D 缩放 动画 */ 
-ms-transform: scale(0.7,1.2); 
border-radius: 50% ; 
} 
</style> 
</head> 
<body> 
<nav id="box"> 
<div> 旋 转 </div> 
<div> 移 动 </div> 
<div> 倾 斜 </div> 
<div> 缩 放 </div> 
</nav> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.6.html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 13-10 所 示 。 当 把 鼠标 指针 
悬浮 在 box 上 时 ， 自 定义 变换 动画 效果 如 图 13-11 所 示 。 


strator\De PD ”0 | 忽 CAserc Wdminictrator\ > ® 


工具。 大 有 人 H 


| 加 Guserswdn 
文 作 日 将 下 在 M) 


天 100% > 


图 13-10 “加载 完成 效果 
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| 时 cuserswdminisatonpe P -6 名 causersWdrinicraton x [CD 
ES 党 昌 二 看 VM) 收入) 工具 大吉 (| 
hh 
所 tao v 


图 13-11 自 定义 变换 动画 效果 


13.2.2 定义 复杂 的 变形 动画 


下 面 来 使 用 transform 属性 中 的 2D 转换 来 实现 一 个 复杂 的 变形 动画 。 
【 例 13-7】 实例 文件 ，ch013\Chap13.7.html》 定 义 复杂 的 变形 动画 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
#big{ 
border: lpx solid blue; 
width: 700px; 
height: 550px; 
cursor:pointer; 
#box{ 
border: lpx solid blue; 
width: S500px; 
height: 500px; 
margin: 30px auto; 
transform: scale(0.8,1); 
#small{ 
position: absolute; 
left: -150px; 
} 
#box #small div{ 
width: 50px; 
height: S50px; 
background: red; 
font-size: 30px; 
color: white; 


margin:15px 15px; 
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/FN 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 信 版 ) 
NY 


</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.7html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 13-12 所 示 。 当 把 鼠标 指针 
悬浮 在 big 上 时 ， 复 杂 变形 动画 效果 如 图 13-13 所 示 。 


ep else D- © | Brera x 
RN SB) SEM sR IRM am 
Som 


13-12 加载 完成 效果 


Wardrobe D ~ 6) cma 
hn ma ea oaN Ton weo 


图 13-13 复杂 变形 动画 效果 


13.3 ”CSS 3 3D 变换 动画 


transform-style 属性 是 3D 空间 一 个 重要 属性 ， 指 定 嵌 套 元 素 如 何在 3D 空间 中 呈现 。transform-style 属 
性 的 使 用 语法 非常 简单 ， 代 码 如 下 : 
transform-style:flat|preserve-3d 


其 中 ，flat 值 为 默认 值 ， 表 示 所 有 子 元 素 在 2D 平面 呈现 ，preserve-3d 表示 所 有 子 元 素 在 3D 空间 中 


H 
当 
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| 


也 就 是 说 ， 如 果 对 一 个 元 素 设置 了 transform-style 的 值 为 at， 则 该 元 素 的 所 有 子 元 素 都 将 被 平展 到 该 
元 素 的 2D 平面 中 进行 呈现 。 沿 着 开 轴 或 了 轴 方 向 旋转 该 元 素 ， 将 导致 位 于 或 -Z 轴 位 置 的 子 元 素 显示 在 
该 元 素 的 平面 上 ， 而 不 是 它 的 前 面 或 者 后 面 。 如 果 对 一 个 元 素 设置 了 transform-style 的 值 为 preserve-3d， 表 
示 不 执行 平展 操作 ， 它 的 所 有 子 元 素 位 于 3D 空间 中 。transform-style 属性 需要 设置 在 父 元 素 中 ， 并 且 高 
任何 嵌 套 的 变形 元 素 。 

perspective 属性 是 设置 查看 者 的 位 置 ， 并 将 可 视 内 容 映射 到 一 个 视 锥 上 ， 继 而 投 到 一 个 2D 视 平面 上 。 
如 果 不 指 定 透视 ， 则 Z 轴 空 间 中 的 所 有 点 将 平 铺 到 同一 个 2D 视 平面 中 ， 并 且 变 换 结果 中 将 不 存在 景深 概 
念 。perspective 属性 也 是 3D 空间 的 重要 属性 之 一 。 


13.3.1 定义 3D 位 移动 画 


Transform 属性 中 属性 值 translate3d(x,y,z) 用 来 定义 3D 位 移动 画 ，x 表示 工 轴 方向 上 的 移动 ,y 表示 了 
轴 方 向 的 移动 ，z 表示 Z 轴 方 向 上 的 移动 。 
【 例 13-8】》〔 实 例文 件 ，ch013\Chap13.8.html》 定 义 3D 位 移动 画 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
*{ 


padding: 0; 
margin: 07 
1 
-box{ 
width: 100px; 
height: 100px; 
outline:thick dotted blue; 
color: white; 
margin:15px 15px; 
transform-style:preserve-3d; /* 定 义 展示 的 空间 */ 
perspective:500px; /*# 设 置 透视 距离 */ 
-ms-perspective:500px; 
} 
-box1{ 
width: 100px; 
height: 100px; 
background: red; 
color: white; 
3 
-box1:hovert{ 
/* 沿 三 轴 移 动 10px, 沿 Y 轴 移动 10px, 沿 2 轴 向 内 移动 200px*/ 
transform: translate3d(10px,10px,—-200px); /* 定 义 3D 位 移动 画 */ 
-ms-transform: translate3d(10px,10px,-200px); 
} 
</style> 
</head> 
<body> 
<div class="box"> 
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<div class="boxl">3D 移动 </div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.8.html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 13-14 所 示 .。 当 把 鼠标 指针 
悬浮 在 boxl 上 时 ，3D 位 移动 画 效果 如 图 13-15 所 示 。 
[ 
| 


BB 
EL 


及 150% » ISO% 


图 13-14 ”加 载 完 成 效果 13-15 ”3D 位 移动 画 效果 


13.3.2 定义 3D 缩放 动画 


Transform 属性 中 属性 值 scale3d(x,y,z) 用 来 定义 3D 缩放 动画 ，x 表示 工 轴 方 向 上 的 移 缩放 ，y 表示 了 
轴 方 向 的 缩放 ，z 表示 Z 轴 方 向 上 的 缩放 。 
【 例 13-9】 (实例 文件 ，ch013\Chap13.9.html) 定义 3D 缩放 动画 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 


padding: 0; 
margin: 0; 
} 
-box{ 
width: 100px; 
height: 100px; 
outline:thick dotted blue; 
color: white; 
margin:15px 15px; 
transform-style:preserve-3d; /* 定 义 展示 的 空间 */ 
perspective:500px; /* 设 置 透视 距离 +/ 
-ms-perspective:500px; 
和 
-boxl{ 
width: 100px; 
height: 100px; 
background: red; 
color: white; 


-boxl:hover{ 
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/* 沿 XX 轴 放 大 到 1.2 倍 , 沿 Y 轴 缩小 到 1.2 倍 , 沿 2 轴 放大 到 1.5 售 */ 


transform: scale3d(1.2,0.8,1.5); /* 定 义 3D 缩放 动画 */ 
-ms-transform: scale3d(1.2,0.8,1.5); 
} 
</style> 
</head> 
<body> 


<div class="box"> 
<div class="box1">3D 移动 </div> 

</div> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap13.9.html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 13-16 所 示 。 当 把 鼠标 指针 
悬浮 在 boxl 上 时 ，3D 缩放 动画 效果 如 图 13-17 所 示 。 
= 淹 x 一 Oo x 


国 cWsersWdminsuat P -6 国 GWserspdmiristat PD - © 
文 作曲 “ 病 B(。 吾 看 MV) 收 忘 闪 和 了” 文件 站 注 久 E)】 要 覃 (V) 攀 坊 了 ” 


条 150% ~ 六 150% ~ 


13-16 ”加 载 完成 效果 13-17 ”3D 缩放 动画 效果 


13.3.3 定义 3D 旋转 动画 


Transform 属性 中 属性 值 rotate3d(x,y,z,angle) 用 来 定义 3D 缩放 动画 ， 参 数 的 含义 如 下 : 
xX: number 类 型 ， 可 以 是 0~1 的 数值 ， 表 示 旋 转轴 x 坐标 方向 的 矢量 。 

y: number 类 型 ， 可 以 是 0~1 的 数值 ， 表 示 旋 转轴 y 坐标 方向 的 矢量 。 

Zz: number 类 型 ， 可 以 是 0~1 的 数值 ， 表 示 旋 转轴 z 坐标 方向 的 矢量 。 

angle: 表示 旋转 的 角度 ， 正 值 表示 顺 时 针 旋转 ， 负 值 表 示 逆 时 针 旋转 。 

【 例 13-10】〈 实 例文 件 ，ch013\Chap13.10.html) 定义 3D 旋转 动画 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
padding: 0; 
margin: 0; 
-box{ 
width: 100px; 
height: 100px; 
outline:1px dotted blue; 
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color: white; 
margin:15px 15px; 
transform-style:preserve-3d; /* 定 义 展示 的 空间 */ 
perspective:500px; /* 设 置 透视 距离 +/ 
-ms-perspective:500px; 
} 
-box1{ 
width: 100px; 
height: 100px; 
background: red; 
color: white; 
} 
-boxl:hover{ 
/* 沿 了 轴 旋 转 60deg*/ 
transform: rotateY (60deg); /* 定 义 3D 旋转 动画 */ 
-ms-transform:rotateY (60deg); 
</style> 
</head> 
<body> 
<div class="box"> 
<div class="boxl">3D 旋转 </div> 
</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-18 所 示 。 当 把 鼠标 指 
针 悬 浮 在 boxl 上 时 ，3D 旋转 动画 效果 如 图 13-19 所 示 。 


人 

| = 这 加 并 

| 国 cAUsersAdministrat D ~ 0 司 cAUsersAdministrat P - © 

| za 篇 句 (E) ”查看 (V) ”收藏 夫 (A) 工 文件 (月 ”六 名 (E) ”查看 (V) 收藏 夫 (A) 工 ” 

| 

[| iso% -| | ow 
图 13-18 ”加 载 完 成 效果 13-19 ”3D 旋转 动画 效果 


13.4 CSS 3 平滑 过 渡 动 画 


transition 属性 是 网 页 上 的 过 渡 动 画 ， 是 元 素 从 一 种 样式 逐渐 改变 为 另 一 种 的 效果 。 
要 实现 这 一 点 ， 必 须 规定 两 项 内 容 : 

(1) 指定 要 添加 效果 的 CSS 属性 。 

(2) 指定 效果 的 持续 时 间 。 
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13.4.1 设置 过 渡 属 性 


Transition-property 属性 用 来 规定 过 渡 效 果 的 CSS 属性 的 名 称 。 
【 例 13-11】 实例 文件 ，ch013\Chap13.11.html) 设置 过 渡 属 性 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 


<title>Title</title> 
<style> 
div{ 
width: 150px; 
height: 100px; 
background: blue; 
/* 指 定 过 渡 属 性 background, width, height*/ 
transition-property:background, width, height; 
} 
div:hover{ /* 刀 标 指针 是 浮 时 的 样式 */ 
background: red; 
width: 200px; 
height: 150px; 
» 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-20 所 示 。 当 把 鼠标 指 
针 悬 浮 在 div 上 时 ， 过 渡 属 性 效果 如 图 13-21 所 示 。 
- 日 x| 
国 CiuserVaminowat -| 加 司 cusesvdnnap -| 加 
文 # 间 “全 台 日 ”下 看 M 收 二 (A 工具 ZH Rl BEV Wi) IRO | 


五 100x% ~ 


图 13-20 “加载 完成 效果 图 13-21 过 渡 属性 效果 


13.4.2 ”设置 过 渡 时 间 


Transition-duration 属性 用 来 规定 过 渡 效 果 需 要 的 时 间 ， 软 认 值 为 0。 
【 例 13-12】《〔 实 例文 件 ，ch013\Chap13.12.html) 设置 过 渡 时 间 。 


<!DOCTYPE html> 
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SA 


<html> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
div{ 
width: 150px; 
height: 100px; 
background: blue; 
/* 设 置 过渡 属 性 background, width, height*/ 
transition-property:background, width, height; 
/* 设 置 过 滤 持续 的 时 间 */ 
transition-duration:2s; 
} 
div:hover{ 
background: red; 
width: 200px; 
height: 150px; 
机 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.12.html 文件 ， 在 正 浏览 器 中 运行 的 


结果 如 图 13-22 所 示 。 当 把 鼠标 指 


针 悬 浮 在 div 上 时 ， 在 2s 中 完成 过 渡 效 果 ， 不 同 阶段 的 效果 如 图 13-23 所 示 。 
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图 13-22 ”加 载 完成 效果 图 13-23 ”过 渡 时 间 效 果 


13.4.3 ”设置 延迟 时 间 


Transition-delay 属性 用 来 规定 过 渡 效 果 的 延迟 时 间 ， 默 认 值 为 0。 
【 例 13-13】 实例 文件 ，ch013\Chap13.13.html) 设置 延迟 时 间 。 


<!DOCTYPE html> 

<html> 

<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
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<style> 
div{ 
width: 150px; 
height: 100px; 
background: blue; 
/* 设 置 过 渡 属 性 background, width, height*/ 
transition-property:background, width, height; 
/* 设 置 延 迟 的 时 间 为 2s*/ 
transition-delay:2s; 
color:white; 
} 
div:hover{ 
background: red; 
width: 200px; 
height: 150px; 
:| 
</style> 
</head> 
<body> 
<div></div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.13.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-24 所 示 。 当 把 鼠标 指 
针 悬 浮 在 div 上 时 ， 延 迟 2s 后 产生 过 渡 效 果 ， 如 图 13-25 所 示 。 


- 0O x = Be x 
司 CVWsersWdmiristrat 月 羡 cNusersAdminisvat 羽 
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或 100% ~ 


图 13-24 “加载 完成 效果 图 13-25 ”鼠标 指针 悬浮 2s 后 的 过 渡 效 果 


13.4.4 设置 过 渡 类 型 


transition-timing-function 属性 用 来 规定 过 渡 效 果 的 过 渡 类 型 ， 它 的 取 值 如 下 : 
linear: 规定 以 相同 速度 开始 至 结束 的 过 渡 效 果 。 

ease: 规定 慢 速 开始 ， 然 后 变 快 ， 然 后 慢 速 结束 的 过 渡 效 果 。 

ease-in， 规定 以 慢 速 开始 的 过 渡 效 果 。 

ease-out: 规定 以 慢 速 结束 的 过 渡 效 果 。 

ease-in-out: 规定 以 慢 速 开始 和 结束 的 过 渡 效 果 。 

【 例 13-14】 实例 文件 ，ch013\Chap13.14.html) 设置 过 渡 类 型 。 


<!DOCTYPE html> 
<html> 
<head> 
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<meta charset="UTF-8"> 
<title>Title</title> 
<style> 
div{ 
width: 150px; 
height: 100px; 
background: blue; 
color:white; 
/* 设 置 过 渡 属 性 background, width, height*/ 
transition-property:background, width, height; 
/* 设 置 过 渡 持 续 的 时 间 */ 
transition-duration:20s; 
/* 设 置 过 滤 类 型 */ 
transition-timing-function:ease-out; 
} 
div:hover{ 
background: red; 
width:200px; 
height:150px; 
》 
</style> 
</head> 
<body> 
<div> 过 渡 类 型 ease-out</div> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.14.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-26 所 示 。 当 把 鼠标 指 
针 悬 浮 在 div 上 时 ，ease-out 过 渡 类 型 的 效果 如 图 13-27 所 示 。 


二 妨 六 - 0O x 


司 cNueerewdminisrat 月 刁 CNusersAdministat 吸 
文件 月 。 妨碍 日 ”下 着 (V|。 收 基 交 ( ” 立 件 月” 如 加 |] 埋 看 IJ) 必 芍 灾 [ 


下 100% ~ 


图 13-26 ”加 载 完成 效果 图 13-27 ”以 慢 速 结束 的 过 渡 效 果 


13.4.5 设置 触发 方式 
在 前 面 几 节 中 是 使 用 伪 元 素来 触发 动画 的 ， 下 面 使 用 JavaScript 来 触发 动画 。 
【 例 13-15】 实例 文件 ，ch013\Chap13.15.html) 设置 触发 方式 。 


<!DOCTYPE html> 
<html> 


<head> 


<meta charset="UTF-8"> 
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<title></title> 
<style> 
#box{ 

background: red; 
width: 150px; 
height: 150px; 
/* 设 置 过 渡 属 性 background, width, height*/ 
transition-property:background, width, height; 


/* 设 置 过 渡 持 续 的 时 间 */ 
transition-duration:10s; 
/* 设 置 过 渡 类 型 */ 
transition-timing-function:ease-out; 
和 
</style> 
</head> 
<body> 


<p> 使 用 JavaSscript 触发 过 渡 动 画 效果 </p> 


<div id="box"></div> 


<script> 
var box=document .getElementById ("box"); // 获 取 页 面 中 的 box 元 素 ,赋值 给 变量 box 
box.onclick=function(){ 7/ 为 box 添加 单 击 事件 , 单 击 触发 执行 下 面 语句 
box.style.background="blue"; // 设 置 box 的 背景 颜色 为 绿色 
box.style.width="200px"; // 设 置 box 的 宽度 为 200 像素 
box.style.height="200px"; // 设 置 box 的 高 度 为 200 像素 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap13.15.html 文件 ， 在 IE 浏览 器 中 运行 的 结果 如 图 13-28 所 示 。 当 单 击 box 
时 ， 触 发 过 渡 动 画 ， 过 渡 不 同 阶段 的 效果 如 图 13-29 所 示 。 


ee 挟 ba 口 x 2 口 x 
四 cNueerewdminierae D ~ 加 chuxernweminitotP - © 站 clUsersAdministrat P ~ © 
文件 介 _ 久久 5) 二 看 V) ri 文件 (篇 红 ( 工具 文 作 (人 帝 贺 (5) 查看 (V) 
使 用 JavaScripl 触 发 过 渡 动 男 效 具 使 用 JavaSeript 地 发 过渡 动画 效果 使 用 TavaScript 字 发 过 渡 动 画 
鼠标 单 击 触发 
戈 10086 我 100% 7 我 100% 7 
图 13-28 “加载 完成 效果 图 13-29 单 击 后 效果 


13.5 ”CSS 3 帧 动画 


从 上 一 节 可 以 看 出 ， 过 渡 动 画 (transition) 有 它 的 局 限 性 ， 虽 然 简单 ， 但 是 它 只 能 在 两 个 状态 之 间 改 


way 
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/ 


\ 
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变 ， 并 且 它 需要 驱动 才能 够 进行 ， 不 能 够 自己 运动 。CSS 3 还 提供 了 另 一 个 动画 属性 animation， 就 是 我 们 
所 说 的 帧 动画 ， 它 相 比 较 于 transition 有 更 强大 的 功能 。 
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.1 设置 关键 帧 


创建 帧 动画 的 原理 是 将 一 套 CSS 样式 逐渐 变化 为 另 一 套 样 式 ; 在 动画 过 程 中 , 您 能 够 多 次 改变 这 套 CSS 


样式 ， 
画 的 天 


以 百分比 来 规定 改变 发 生 的 时 间 ， 或 者 通过 关键 词 “from” 和 “to”， 等 价 于 0% 和 100%，0% 是 动 
fF 始 时 间 ，100% 动 画 的 结束 时 间 。 


要 创建 CSS 3 动画 ， 必 须要 先 了 解 @keyframes 规则 。@keyframes 规则 是 创建 动画 ， 在 @keyframes 中 


规定 某 项 CSS 样式 ， 就 能 创建 由 当前 样式 逐渐 变 成 新 样式 的 动画 效果 。 


旬 


| 建 动画 ， 设 置 关 键 帧 ， 语 法 如 下 


Bkeyframes [动画 名 ]{ 
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开始 帧 : 08 或 者 from{ 动 画 开始 的 样式 } 
50%{50% 的 样式 } 
结束 帧 : 100% 或 者 to{ 结 束 时 的 样式 } 


.2 设置 动画 属性 


创建 完 动画 ， 接 下 来 就 可 以 使 用 动画 了 ， 首 先 通过 animation 属性 绑 定 一 个 选择 器 ， 并 至 少 指定 
animation-name (动画 名 ) 和 animation-duration (动画 时 间 )， 动 画 才能 有 效果 。animation 是 一 个 综合 属性 ， 
其 他 属性 如 表 13-1 所 示 。 


表 13-1 animation 属性 


animation-name 指定 动画 名 称 
animation-duration 指定 动画 播放 一 遍 的 时 间 ， 默 认 是 0 
animation-delay 指定 动画 开始 时 的 延迟 时 间 ， 默 认 是 0 
animation-interation-count 指定 动画 播放 的 遍 数 ， 取 值 为 数值 或 者 为 infinite 
animation-direction 指定 动画 的 播放 方向 ， 默 认 是 normal，reverse 是 方向 相反 
animation-timing-finction 指定 动画 的 速度 曲线 ， 默 认 ease 缓 动 
animation-play-state 指定 动画 的 运行 或 暂停 ， 默 认 是 nmning 
本 指定 当 动画 不 播放 时 , 元 素 的 样式 。 通过 将 animation-fill-mode 设置 为 forwards、backwards 
wlion finde 和 both 将 元 素 最 终 状态 设置 为 动画 的 起 始 或 结束 状态 


【 例 13-16】 实例 文件 ，ch013\Chap13.16.html) 设置 animation 动画 属性 。 


<!DOCTYPE html> 
<html> 


<head> 


<meta charset="UTF-8"> 
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<title></title> 
<style> 
*{margin:0;padding:0;} 
div{ 
width: 100px; 
height:100px; 
color: white; 
border:1px solid #000; 
position:relative; 


animation:change 5s infinite;} /* 定 义 animation 动画 属性 */ 
keyframes changet /* 创 建 动画 change*/ 
/* 设 置 关键 帧 */ 


0%{ background-color: red;left:0;top: 


7} 
25%{ background-color: green;left:100px;top:0;} 
50%{ background-color: blue;left:100px;top:100px;} 
75%{ background-color: pink;left:0;top:100px;} 
100%{ background-color: purple;left:0;top:0;} 

} 
</style> 

</head> 

<body> 

<div> 帧 动画 </div> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap13.16.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-30 所 示 。 


图 13-30 动画 运行 过 程 
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13.6 ”实践 案例 


本 章 介绍 了 CSS 3 新 增加 的 一 些 动画 效果 ， 下 面 使 用 本 章 介绍 的 动画 属性 来 实现 一 些 效果 。 


3.6.1 设计 炫 酷 菜单 


本 案例 设计 了 一 个 下 拉 菜单 ， 它 有 两 个 菜单 ， 每 个 菜单 各 有 一 种 动画 。 第 一 种 动画 使 用 了 旋转 变形 动 
画 ， 第 二 种 动画 使 用 了 缩放 变形 动画 。 
【 例 13-17】 (实例 文件 ，ch013\Chap13.17.html) 设计 酷 炫 菜单 。 
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相关 的 代码 实例 请 参考 Chap13.7.html 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 13-31 所 示 。 当 把 鼠标 指针 
悬浮 在 “男装 ”上 时 ， 下 拉 菜单 的 动画 效果 如 图 13-32 所 示 ， 当 把 鼠标 指针 悬浮 在 “女装 ”上 时 ， 下 拉 菜 
单 的 动画 效果 如 图 13-33 所 示 。 


图 13-31 ”加 载 完 成 效果 
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CSS 动 画 菜 单 CSS 动 画 菜 单 
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图 13-32 鼠标 指针 悬浮 “男装 ”下 拉 菜 单 效果 图 13-33 ”鼠标 指针 悬浮 “女装 ”下 拉 菜 单 效 


13.6.2 设计 3D 几何 体 
实现 3D 几何 体 效 果 首 先 要 设置 3D 舞台 ， 通 过 perspective 属性 来 设置 大 小 。 紧 接着 再 定义 


页 动画 效果 


果 


E 方 体 的 6 


个 面 ， 都 统一 定位 到 合适 的 位 置 ， 接 下 来 通过 变形 动画 来 实现 一 个 简单 的 立方 体 效果 。 在 3D 变形 中 应 遵 
循 : 用 左手 握 住 相应 的 坐标 系 ， 大 拇指 指向 正 的 方向 ， 其 余 四 个 手指 弯曲 的 方向 就 是 旋转 正 值 的 旋转 方向 ， 


如 图 13-34 所 示 。 
X 轴 


2 轴 (相向 我 们 自己 ) 
了 遇 


图 13-34 ”坐标 方向 
【 例 13-18】〗】 《〈 实 例文 件 ， ch013\Chap13.18.html) 设计 3D 几何 体 。 


<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title></title> 
<style> 
.stage{ 
perspective: 1600px; /* 设 置 透视 距离 */ 
position: relative; 
left: 500px; 
top: 100px; 
} 
#box{ 
width: 400px; 
height: 400px; 
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相关 的 代码 实例 请 参考 Chap13.18.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-35 所 示 。 
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一 号 
| GE 


13.6.3 设计 3D 旋转 的 盒子 


3D 盒子 在 上 一 节 已 经 介绍 了 ， 下 面 只 需要 让 3D 旋转 盒子 动 起 来 即 可 。 
【 例 13-19】 实 例文 件 ，ch013\Chap13.19.html) 设计 3D 旋转 的 盒子 。 
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相关 的 代码 实例 请 参考 Chap13.19.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-36 所 示 。 


习 - 色 


图 13-36 ”3D 盒子 旋转 效果 


13.6.4 设计 翻转 广告 


在 设计 翻转 广告 牌 代码 中 ，z-index 属性 设置 元 素 的 堆 释 顺序 。 拥 有 更 高 堆 公 顺 序 的 元 素 总 是 会 处 于 堆 
全 顺序 较 低 的 元 素 的 前 面 。z-index 仅 能 在 定位 元 素 上 奏效 。 
【 例 13-20】 实例 文件 ，ch013\Chap13.20.html) 设计 翻转 广告 。 
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相关 的 代码 实例 请 参考 Chap13.20.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 13-37 所 示 。 当 把 鼠标 指 
针 悬 浮 在 “第 一 张 ”图 片上 时 ， 广 告 牌 翻转 ， 展 示 说 明 信 息 效果 如 图 13-38 所 示 。 


239 


AN 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实 踪 (起 信 版 ) 


Se 


13-37 页面 加 载 完成 效果 
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13-38 ”鼠标 指针 悬浮 “第 一 张 ”图 片 效果 


13.7 ”就 业 面 试 技巧 与 解析 


13.7.1 ”面试 技巧 与 解析 (一) 


面试 官 : CSS 3 中 新 出 了 哪些 可 以 让 页 面 动 起 来 的 属性 ? 
应 聘 者 : 有 transform 变形 动画 、transition 过 渡 动 画 和 animation 关键 帧 动画 。 


13.7.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : CSS 3 中 transition 和 animation 区 别 是 什么 ? 

应 聘 者 : transition 强调 过 渡 ， 需 要 触发 一 个 事件 ， 如 鼠标 指针 移 上 去 、 焦 点 、 点 击 。animation 有 多 个 
关键 帧 ， 实 现 自由 动画 不 需要 触发 任何 事件 ， 也 可 随时 间 变 化 达到 一 种 动画 效果 ， 与 ransition 不 同 的 是 ， 
animation 可 以 通过 @keyframe 控制 当前 关键 帧 的 属性 ， 运 用 更 加 灵活 。 
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在 本 篇 中 ， 将 通过 案例 示范 学 习 JavaScript 在 前 端 开发 中 的 一 些 核心 技术 。 例 如 JavaScript 的 基础 、 开 


发 应 用 工具 、 对 象 与 数组 、 函 数 与 闭 包 以 及 窗口 与 人 机 交互 对 话 框 等 核心 技术 。 


第 14 章 
第 15 章 
第 16 章 
第 17 章 
第 18 章 


JavaScript 基础 

JavaScript 开发 应 用 工具 
JavaScript 对 象 与 数组 

JavaScript 函数 与 闭 包 

JavaScript 窗口 与 人 机 交互 对 话 框 


第 14 章 
JavaScript 基础 


”学习 指引 


JavaScript 是 互联 网 上 最 流行 的 脚本 语言 ， 这 门 语言 可 用 于 HIML 和 web， 更 可 广泛 用 于 服务 器 、PC、 
笔记 本 计算 机 、 平 板 计算 机 和 智能 手机 等 设备 。 本章 将 详细 介绍 JavaScript 的 相关 基础 知识 ， 主 要 内 容 包括 
JavaScript 的 概述 、 网 页 中 的 JavaScript、 变 量 、 数 据 类 型 、 运 算 符 、 运 算 符 优先 级 、 表 达 式 语句 、 条 件 判 


断 语 句 、 循 环 语句 、 条 件 语句 等 。 


二 ”重点 导读 


。 了 解 JavaScript 的 概述 。 

“掌握 网 页 执行 JavaScript 的 方法 。 
* 熟悉 变量 的 操作 。 

。 热 悉 JavaScript 中 的 数据 类 型 。 

。 熟 悉 JavaScript 中 的 运算 符 。 

。 掌 握 表 达 式 语句 的 应 用 。 

。 掌 握 条 件 判断 语句 的 使 用 方法 。 
* 掌握 循 环 语句 的 使 用 方法 。 


14.1 JavaScript 概述 


JavaScript 是 一 种 由 Netscape 的 Live Script 发 展 而 来 的 面向 过 程 的 客户 端 脚本 语言 , 为 客户 


提供 更 流畅 


的 浏览 效果 。 另 外 ， 由 于 Windows 操作 系统 对 其 拥有 较为 完善 的 支持 ， 并 提供 二 次 开发 的 接口 来 访问 操作 


系统 中 各 个 组 件 ， 从 而 可 实现 相应 的 管理 功能 。 


14.1.1 JavaScript 能 做 什么 ? 


JavaScript 是 一 种 解释 性 的 、 基 于 对 象 的 脚本 语言 (Objectbased scripting language)， 其 


要 


[a 
征 : 


基于 客 
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户 端 运行 的 ， 用 户 点 击 带 有 JavaScript 脚本 的 网 页 ， 网 页 里 的 JavaScript 就 会 被 传 到 浏览 器 ， 由 浏览 器 对 此 
作 处 理 。 如 下 拉 菜 单 、 验 证 表单 有 效 性 等 大 量 互动 性 功能 ， 都 是 在 客户 端 完 成 的 ， 不 需要 和 Web Server 发 
生 任何 数据 交换 。 因 此, 不 会 增加 Web Server 的 负担 .几乎 所 有 浏览 器 都 支持 JavaScript, 如 Internet Explorer 
(IE)、 Firefox、Netscape、Mozilla、Opera 等 。 
在 互联 网 上 可 看 到 很 多 应 用 了 JavaScript 的 实例 ， 下 面 介绍 一 些 JavaScript 的 典型 应 用 。 
改善 导航 功能 一 一 JavaScript 最 常见 的 应 用 就 是 网 站 导航 系统 , 可 以 使 用 JavaScript 创建 一 个 导航 工具 。 
如 用 于 选择 下 一 个 页 面 的 下 拉 菜 单 ,或 者 当 鼠 标 指针 移动 到 某 导航 链接 上 时 所 弹出 的 子 菜 单 。 只 要 
正确 应 用 ， 此 类 JavaScript 交互 功能 就 使 得 浏览 网 站 更 方便 ， 而 且 该 功能 在 不 支持 JavaScript 的 浏 
览 器 上 也 是 可 以 使 用 的 。 
验证 表单 一 一 验证 表单 是 JavaScript 一 个 比较 常用 的 功能 。 使 用 一 个 简单 脚本 就 可 以 读 取 用 户 在 表单 中 
输入 的 信息 ， 并 确保 输入 格式 的 正确 性 ， 如 要 保证 输入 的 是 电话 号 码 或 者 是 电子 邮箱 。 该 项 功能 可 
提醒 用 户 注意 一 些 常 见 的 错误 并 加 以 改正 ， 而 不 必 等 待 服务 器 的 响应 。 
特殊 效果 一 一 JavaScript 一 个 最 早 的 应 用 就 是 创建 引 人 注 目的 特殊 效果 , 如 在 浏览 器 状态 行 显示 滚动 的 
信息 ， 或 者 让 网 页 背景 颜色 闪烁 。 
远程 脚本 技术 (AJAX) 一 一 长 期 以 来 ，JavaScript 最 大 的 限制 是 不 能 和 Web 服务 器 进行 通信 的 ， 如 可 
以 用 JavaScript 确保 电话 号 码 的 位 数 正确 ， 但 不 能 利用 电话 号 码 来 查找 用 户 在 数据 库 中 的 位 置 。 
综 上 所 述 ，JavaScript 是 一 种 新 的 描述 语言 ， 它 可 以 被 嵌入 到 HTML 的 文件 之 中 。JavaScript 语言 可 以 
做 到 回应 使 用 者 的 需求 事件 (如: form 的 输入 )， 而 不 用 任何 的 网 路 来 回 传输 资料 ， 所 以 当 一 位 使 用 者 输入 
一 项 资料 时 ， 它 不 用 经 过 传 给 服务 端 〈Server) 处 理 、 再 传 回来 的 过 程 ， 而 直接 可 以 被 客户 端 〈Client) 的 
应 用 程式 所 处 理 。 


14.1.2 ” JavaScript 的 基本 特点 


JavaScript 的 主要 作用 是 与 HTML 超 文 本 标记 语言 、Java 脚本 语言 (Java 小 程序 ) 一 起 实现 在 一 个 
Web 页 面 中 连接 多 个 对 象 ， 与 Web 客户 交互 作用 ， 从 而 可 以 开发 客户 端的 应 用 程序 等 ， 它 是 通过 典 入 或 调 
入 到 标准 的 HTML 语言 中 实现 的 。 它 的 出 现 弥补 了 HTML 语言 的 缺陷 ， 是 Java 与 HTML 折 甫 的 选择 , 具 


脚本 编写 语言 一 一 JavaScript 是 一 种 采用 小 程序 段 方式 来 实现 编程 的 脚本 语言 。 同 其 他 脚本 语言 一 样 ， 
JavaScript 是 一 种 解释 性 语言 ， 在 程序 运行 过 程 中 被 逐 行 地 解释 。 此 外 ， 它 还 可 与 HTML 标识 结合 
在 一 起 ， 从 而 方便 用 户 的 使 用 。 

基于 对 象 的 语言 一 一 JavaScript 是 一 种 基于 对 象 的 语言 ， 同 时 可 以 看 作 一 种 面向 对 象 的 语言 。 这 意味 着 
它 能 运用 自己 已 经 创建 的 对 象 。 因此 , 许多 功能 可 以 来 自 脚 本 环境 中 对 象 的 方法 与 脚本 的 相互 作用 。 

简单 性 一 一 JavaScript 的 简单 性 主要 体现 在 : 首先 它 是 一 种 基于 Java 基本 语句 和 控制 流 之 上 的 简单 而 紧 
凑 的 设计 , 从 而 对 于 学 习 Java 是 一 种 非常 好 的 过 渡 。 其 次 它 的 变量 类 型 是 采用 弱 类 型 ， 并 未 使 用 严 
格 的 数据 类 型 。 

安全 性 一 一 JavaScript 是 一 种 安全 性 语言 。 它 不 允许 访问 本 地 的 硬盘 ， 并 不 能 将 数据 存 入 到 服务 器 上 ， 
不 允许 对 网 络 文档 进行 修改 和 删除 ， 只 能 通过 浏览 器 实现 信息 浏览 或 动态 交互 ， 从 而 有 效 地 防止 数 
据 丢失 。 

动态 性 一 一 JavaScript 是 动态 的 ， 它 可 以 直接 对 用 户 或 客户 输入 做 出 响应 ， 无 须 经 过 Web 服务 程序 。 
它 采 用 以 事件 驱动 的 方式 对 用 户 的 反映 作出 响应 。 所 谓 事件 〈Event) 驱动 ， 就 是 指 在 主页 (Home 


243 


一 


ZE 
HTML Css 3+JavaScript 从 入 门 到 项 目 实践 ( 超 信和 版 ) 


Page) 中 执行 了 某 种 操作 所 产生 的 动作 。 例 如 按 下 鼠标 、 移 动 窗口 、 选 择 菜单 等 均 可 视 为 事件 。 当 
事件 发 生 后 ， 可 能 会 引起 相应 的 事件 响应 。 

跨 平 台 性 一 一 JavaScript 依赖 于 浏览 器 本 身 ， 与 操作 环境 无 关 。 只 要 能 运行 浏览 器 的 计算 机 ， 并 支持 
JavaScript 的 浏览 器 就 可 正确 执行 。 


14.2 ”网 页 中 的 JavaScript 


在 网 页 中 添加 JavaScript 代码 ， 需 要 使 用 标记 来 标识 脚本 代码 的 开始 和 结束 。 该 标记 就 是 <script>， 它 
告诉 浏览 器 ， 在 <scrip 忆 标记 和 </scrip 忆 结束 标记 之 间 的 文本 块 并 不 是 要 显示 的 网 页 内 容 ， 而 是 需要 处 理 的 
脚本 代码 。 


时 14.2.1 执行 代码 


在 网 页 中 执行 JavaScript 代码 可 以 分 为 以 下 几 种 情况 , 分别 是 在 网 页 头 中 执行 、 在 网 页 中 执行 、 在 网 页 
的 元 素 事 件 中 执行 、 调 用 已 经 存在 的 JavaScript 文件 、 将 JavaScript 代码 作为 属性 值 执行 等 。 


1. 在 网 页 头 中 执行 JavaScript 代码 
如 果 不 是 通过 JavaScript 脚本 生成 HTML 网 页 的 内 容 ,JavaScript 脚本 一 般 放 在 HTML 网 页 的 头 部 的 <head> 
与 <head> 标 签 对 之 间 。 这 样 ， 不 会 因为 JavaScript 影响 整个 网 页 的 显示 结果 。 执 行 JavaScript 的 格式 如 下 : 


<head> 

<title> 在 网 页 头 中 嵌入 JavaScript 代码 <title> 
<script language="Javascript"> 
JavaScript 脚本 内 容 

</script> 

</head> 


在 <script> 与 </scrip 亿 标签 中 添加 相应 的 JavaScript 脚本 ， 这 样 就 可 以 直接 在 HTML 文件 中 调用 
JavaScript 代码 ， 以 实现 相应 的 效果 。 


2. 在 网 页 中 执行 JavaScript 代码 
当 需 要 使 用 JavaScript 脚 本 生成 HIML 网 页 内 容 时 , 如 某 些 JavaScript 实 现 的 动态 树 , 就 需要 把 JavaScript 
放 在 HTML 网 页 主题 部 分 的 <body> 与 </body> 标 签 对 中 。 执 行 JavaScript 的 格式 如 下 : 


<body> 

<script language="Javascript"> 
JavaScript 脚本 内 容 

</script> 

</body> 


另外 ，JavaScript 代码 可 以 在 同一 个 HTML 网 页 的 头 部 与 主题 部 分 同时 嵌入 ， 并 且 在 同一 个 网 页 中 可 
以 多 次 嵌入 JavaScript 代码 。 

3. 在 网 页 中 调用 已 经 存在 的 JavaScript 文件 

如 果 JavaScript 的 内 容 较 长 ,或 者 多 个 HIML 网 页 中 都 调用 相同 的 JavaScript 程序 , 可 以 将 较 长 的 JavaScript 
或 者 通用 的 JavaScript 写成 独立 的 js 文件 ， 直 接 在 HIML 网 页 中 调用 。 执 行 JavaScript 的 格式 如 下 。 


<script src = "hello.js"></script> 
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4. 通过 JavaScript 伪 URL 引入 JavaScript 脚本 代码 

在 多 数 支持 JavaScript 脚本 的 浏览 器 中 ， 可 以 通过 JavaScript 伪 URL 地 址 调用 语句 来 引入 JavaScript 
脚本 代码 。 伪 URL 地 址 的 一 般 格 式 如 下 : 

JavaSscript:alert ("已 点 击 文本 框 !") 

由 上 可 知 ， 伪 URL 地 址 语句 一 般 以 JavaScript 开始 ， 后 面 就 是 要 执行 的 操作 。 


5. 在 网 页 的 元 素 事件 中 执行 JavaScript 代码 

在 开发 Web 应 用 程序 的 过 程 中 ， 开 发 者 可 以 给 HTML 文档 设置 不 同 的 事件 处 理 器 ， 一 般 是 设置 某 HTML 
元 素 的 属性 来 引用 一 个 脚本 , 如 可 以 是 一 个 简单 的 动作 , 该 属性 一 般 以 on 开头 , 如 按 下 鼠标 事件 OnClickO 
等 。 这 样 ， 当 需要 对 HTML 网 页 中 的 该 元 素 进行 事件 处 理 时 (验证 用 户 输入 的 值 是 否 有 效 )， 如 果 事件 处 
理 的 JavaScript 代码 量 较 少 ， 就 可 以 直接 在 对 应 的 HTML 网 页 的 元 素 事件 中 嵌入 JavaScript 代码 。 


14.2.2 ”函数 


函数 是 由 事件 驱动 的 或 者 当 它 被 调用 时 执行 的 可 重复 使 用 的 代码 块 。 在 代码 中 ， 函 数 就 是 包 庄 在 大 括 
号 中 的 代码 块 ， 前 面 使 用 了 关键 词 function， 格 式 如 下 : 


function functionname () 


执行 代码 
} 
当 调 用 该 函数 时 , 会 执行 函数 内 的 代码 , 可 以 在 某 事件 发 生 时 直接 调用 函数 (例如 当 用 户 单 击 按钮 时 )， 
并 且 可 由 JavaScript 在 任何 位 置 进行 调用 。 
注意 : JavaScript 对 大 小 写 敏感 ， 关 键 词 function 必须 是 小 写 的 ， 并 且 必 须 以 与 函数 名 称 相同 的 大 小 写 
来 调用 函数 。 


14.2.3 对象 


JavaScript 对 象 是 拥有 属性 和 方法 的 数据 。 在 JavaScript 中 ， 对 象 是 非常 重要 的 ， 当 你 理解 了 对 象 ， 就 
可 以 了 解 JavaScript。 对 象 也 是 一 个 变量 ， 但 对 象 可 以 包含 多 个 值 或 多 个 变量 。 

例如 下 面 一 段 代码 : 

var car = {type:"Fiat", model:500, color:"white"}; 
其 中 ，3 个 值 ("Fiat"、500、"white") 赋予 变量 car。3 个 变量 (type、model、color) 也 赋予 变量 car。 

另外 ，JavaScript 对 象 可 以 使 用 字符 来 定义 和 创建 ， 例 如 下 面 一 段 代 码 ， 就 是 创建 了 一 个 人 对 象 ， 包 括 
姓名 、 年 龄 等 属性 。 


var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 


14.3 ”变量 


变量 是 用 来 临时 存储 数值 的 容器 。 在 程序 中 ， 变 量 存储 的 数值 是 可 以 变化 的 ， 变 量 占据 一 段 内 存 ， 通 
过 变量 的 名 字 可 以 调用 内 存 中 的 信息 。 
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14.3.1 变量 的 声明 


和 尽管 JavaScript 是 一 种 弱 类 型 的 脚本 语言 , 变量 可 以 在 不 声明 的 情况 下 直接 使 用 , 但 在 实际 使 用 过 程 中 ， 
最 好 还 是 先 使 用 var 关键 字 对 变量 进行 声明 。 声 明 变量 具有 如 下 几 种 规则 ; 

可 以 使 用 一 个 关键 字 var 同时 声明 多 个 变量 ， 如 语句 “var x.y:” 就 同时 声明 了 x 和 y 两 个 变量 。 

可 以 在 声明 变量 的 同时 对 其 赋值 ( 称 为 初始 化 )， 例 如 “var president = "henan":var x=5,y=12;” 声 明了 3 
个 变量 president、x 和 y， 并 分 别 对 其 进行 了 初始 化 。 如 果 出 现 重复 声明 的 变量 ， 且 该 变量 已 有 一 
个 初始 值 ， 则 此 时 的 声明 相当 于 对 变量 的 重新 赋值 。 

如 果 只 是 声明 了 变量 ， 并 未 对 其 赋值 ， 其 值 缺 省 为 undefined。 

var 语句 可 以 用 作 for 循环 和 for/in 循环 的 一 部 分 ， 这 样 可 以 使 得 循环 变量 的 声明 成 为 循环 语法 自身 的 
一 部 分 ， 使 用 起 来 较为 方便 。 

当 给 一 个 尚未 声明 的 变量 赋值 时 ，JavaScript 会 自动 用 该 变量 名 创建 一 个 全 局 变量 。 在 一 个 函数 内 部 ， 
通常 创建 的 只 是 一 个 仅 在 函数 内 部 起 作用 的 局 部 变量 ， 而 不 是 一 个 全 局 变量 。 要 确保 创建 的 是 一 个 局 部 变 
量 ， 而 不 仅仅 是 赋值 给 一 个 已 经 存在 的 局 部 变量 ， 就 必须 使 用 var 语句 进行 变量 声明 。 

注意 : JavaScript 变量 声明 时 ， 不 指定 变量 的 数据 类 型 。 一 个 变量 一 旦 声明 ， 可 以 存放 任何 数据 类 型 的 
信息 ，JavaScript 会 根据 存放 的 信息 类 型 ， 自 动 为 变量 分 配合 适 的 数据 类 型 。 


14.3.2 ”变量 的 作用 域 


变量 的 作用 范围 又 称 为 作用 域 ， 是 指 某 变量 在 程序 中 的 有 效 范围 。 根 据 作用 域 的 不 同 ， 变 量 可 划分 为 
全 局 变量 和 局 部 变量 。 
全 局 变量 : 全 局 变量 的 作用 域 是 全 局 性 的 ， 即 在 整个 JavaScript 程序 中 ， 全 局 变量 处 处 都 存在 。 
局 部 变量 ; 局 部 变量 是 函数 内 部 声明 的 ， 只 作用 于 函数 内 部 ， 其 作用 域 是 局 部 性 的 ， 函 数 的 参数 也 是 
局 部 性 的 ， 只 在 函数 内 部 起 作用 。 
【 例 14-1】 实例 文件 ，ch14\Chap14.1.html》 变 量 定义 实例 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
<script> 
var myName = "zhangsan";  // 声 明 myName 并 把 "zhangsan" 赋值 给 它 
alert (myName); 
myName = "lisi"; 
alert (myName) 7 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap14.1.html 文件 。 在 正 浏览 器 中 运行 的 结果 如 图 14-1 所 示 。 从 结果 中 可 以 
看 到 同一 变量 具有 不 同 的 运行 结果 。 


246 


第 四 阐 JavaScript 基础 


来 咎 网 页 的 满 息 x 来 鱼网 页 的 消息 。 X 


企 zhangsan 全 lisi 


图 14-1 定义 变量 后 的 运行 结果 


14.3.3 ”变量 的 优先 级 


在 函数 内 部 ， 局 部 变量 的 优先 级 高 于 同名 的 全 局 变量 。 也 就 是 说 ， 如 果 存 在 与 全 局 变量 名 称 相同 的 局 
部 变量 ， 或 者 在 函数 内 部 声明 了 与 全 局 变量 同名 的 参数 ， 则 该 全 局 变量 将 不 再 起 作用 。 
【 例 14-2】 (实例 文件 ，chl4\Chap14.2.html) 变量 的 优先 级 。 


<!DOCTYPE html> 


<html> 

<head> 

<title> 变 量 的 优先 级 </title> 

<body> 

<script language="javascript"> 

var scope=" 全 局 变量 "7 7/ 声明 一 个 全 局 变量 
function checkscope () 

{ 

var scope=" 局 部 变量 "; // 声 明 一 个 同名 的 局 部 变量 
document .write (scope); // 使 用 的 是 局 部 变量 , 而 不 是 全 局 变量 
} 

checkscope () 7 7/ 调用 函数 ,输出 结果 
</script> 

</body> 

</head> 

</html> 


相关 的 代码 实例 请 参考 Chap14.2.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-2 所 示 。 从 结果 中 可 以 
看 出 输入 的 是 “局 部 变量 ”。 
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局 部 变量 


图 14-2 变量 的 优先 级 


注意 : 虽然 在 全 局 作用 域 中 可 以 不 使 用 var 声明 变量 ， 但 声明 局 部 变量 时 ， 一 定 要 使 用 Var 语句。 
JavaScript 没有 块 级 作用 域 ， 函 数 中 的 所 有 变量 无 论 是 在 哪里 声明 的 ， 在 整个 函数 中 都 有 意义 。 
【 例 14-3】 (实例 文件 ，chl4\Chap14.3.html) JavaScript 无 块 级 作用 域 。 


<!DOCTYPE html> 
<html> 


247 


NS 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 


<head> 


<title> 变 量 的 优先 级 </title> 
<body> 
<script language="javascript"> 
var scope=" 全 局 变量 "; // 声 明 一 个 全 局 变量 
function checkscope () // 创 建 checkscope 函数 
{ 
alert (scope); // 调 用 局 部 变量 ,将 显示 "undefined" 而 不 是 "局 部 变量 
var scope=" 局 部 变量 ";  “// 声 明 一 个 同名 的 局 部 变量 
alert (scope); // 使 用 的 是 局 部 变量 ,将 显示 "局 部 变量 " 
} 
checkscope (); // 调 用 函数 , 输出 结果 
</script> 
</body> 
</head> 
</html> 


相关 的 代码 实例 请 参考 Chap14.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-3 所 示 。 
单 击 “确定 ”按钮 ， 弹 出 结果 如 图 14-4 所 示 。 


图 14-3 运行 结果 图 14-4 局 部 变量 
在 本 例 中 ， 用 户 可 能 认为 因为 声明 局 部 变量 的 var 语句 还 没有 执行 而 调用 全 局 变量 scope， 但 由 于 “无 
块 级 作用 域 ” 的 限制 ， 局 部 变量 在 整个 函数 体内 是 有 定义 的 。 这 就 意味 着 在 整个 函数 体 中 都 隐藏 了 同名 的 
全 局 变量 ， 因 此 ， 输 出 的 并 不 是 “全 局 变量 ”。 虽 然 局 部 变量 在 整个 函数 体 都 是 有 定义 的 ， 但 在 执行 var 语 
句 之 前 不 会 被 初始 化 ， 


14.4 ”数据 类 型 


JavaScript 中 共有 9 种 数据 类 型 ， 分 别 是 未 定义 (Undefined)、 空 Null)、 布 尔 型 (Boolean)、 字 符 串 
(String)、 数 值 (Number)、 对 象 (Object)、 引 用 (Reference)、 列 表 (List) 和 完成 (Completion)。 其 中 
后 3 种 类 型 仅仅 作为 JavaScript 运行 时 中 间 结 果 的 数据 类 型 ， 因 此 不 能 在 代码 中 使 用 , 下 面 讲解 一 些 常用 的 
数据 类 型 。 


14.4.1 ”未 定义 类 型 


Undefined 是 未 定义 类 型 的 变量 ， 表 示 变 量 还 没有 赋值 ， 如 var a:， 或 者 赋予 一 个 不 存在 的 属性 值 ， 例 
如 var a=String.notProperty。 

此 外 ，JavaScript 中 有 一 种 特殊 类 型 的 数字 常量 NaN， 表 示 “ 非 数字 ”， 当 在 程序 中 由 于 某 种 原因 发 生 
计算 错误 后 ， 将 产生 一 个 没有 意义 的 数字 ， 此 时 JavaScript 返回 的 数字 值 就 是 NaN。 
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【 例 14-4】 (实例 文件 ，chl4\Chap14.4html) 使 用 未 定义 类 型 。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

Var person; 

document .write (person + "<br />"); // 在 页 面 中 输出 person 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap14.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-5 所 示 。 


- 0O x 
同 MAITIaoi7iouomeD - 6 | 二 MATfezoriovw x 
ZN) WEE EV) CA) 工具 RO(H) 


underined 


14-5 ”使 用 未 定义 类 型 运行 结果 


14.4.2” 空 类 型 


JavaScript 中 的 关键 字 null 是 一 个 特殊 的 值 ， 表 示 空 值 ， 用 于 定义 空 的 或 不 存在 的 引用 。 不 过 ，null 不 
等 同 于 空 的 字符 串 或 0。 由 此 可 见 ，null 与 undefined 的 区 别 是 : null 表示 一 个 变量 被 赋予 了 一 个 空 值 ， 而 
undefined 则 表示 该 变量 还 未 被 赋值 。 

【 例 14-5】 (实例 文件 ， chl4\Chap14.5.html) 使 用 空 类 型 。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

Var person; 

document .write (person + "<br />"); // 在 页 面 中 输出 person 
var car=null 

document .write (car + "<br />"); // 在 页 面 中 输出 car 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap14.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-6 所 示 。 


画 MATepo7iawws DG] BMAIMR27IOa > 
4 RE 《大 < ITRm WH 


undefined 
mull 


图 14-6 使 用 空 类 型 运行 结果 
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a 14.4.3 ”布尔 类 型 


数值 数据 类 型 和 字符 串 数据 类 型 可 能 的 值 都 无 穷 多 ， 但 布尔 型 数据 类 型 只 有 两 个 值 ， 这 两 个 合法 的 值 
分 别 用 true 和 false 表示 。 一 个 布尔 值 代表 的 是 一 个 “ 真 值 ”， 它 说 明了 某 个 事物 是 真 还 是 假 。 通常 ,使 用 1 
表示 真 ，0 表示 假 。 布 尔 值 通常 是 在 JavaScript 程序 中 比较 所 得 的 结果 。 

Boolean 类 型 的 toString( 方 法 只 是 输出 tme 或 false， 结 果 由 变量 的 值 决定 ， 例 如 : 

【 例 14-6】〔 实 例文 件 ，ch14\Chap14.6.html) 使 用 布尔 类 型 。 


<!DOCTYPE html> 


<html> 
<body> 

<script type="text/javascript"> 

var bl = Boolean(""); // 返 回 false, 空 字符 囊 
Var b2 = Boolean("s"); // 返 回 true, 非 空 字符 囊 
Var b3 = Boolean (0); /V/ 返 回 false, 数 字 0 
var b4 = Boolean(1)7 // 返 回 true, 非 0 数字 
var b5 = Boolean(-1); // 返 回 true, 非 0 数字 
var b6 = Boolean (nul1)7 // 返 回 false 

var b7 = Boolean (undefined); // 返 回 false 

Var b8 = Boolean (new Object())7 // 返 回 true, 对象 


document .write (bl + "<br>") 


document .write (b2 + "<br>") 
document .write (b3 + "<br>") 
document .write (b4 + "<br>") 
document .write (b5 + "<br>") 
document .write (b6 + "<br>") 
document .write (b7 + "<br>") 
document .write (b8 + "<br>") 
</script> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap14.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-7 所 示 。 
or 口 x 
可 WIIEoo7iWwa DC | 姜 MATPE2O171OV ev 
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false 
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false 
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trus 
false 
false 
re 
图 14-7 使 用 布尔 类 型 运行 结果 
回 
必 
14.4.4 “字符 串 


字符 串 由 零 个 或 者 多 个 字符 构成 ， 字 符 可 以 包括 字母 、 数 字 、 标 点 符号 和 空格 ， 字 符 串 必 须 放 在 单 引 
号 或 者 双 引 号 里 。JavaScript 字符 串 定义 方法 : 

方法 一 : 

var str =" 字 符 串 "; 
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方法 二 : 

var str = new String ("字符 囊 "); 

JavaScript 字符 串 使 用 注意 事项 。 

字符 串 类 型 可 以 表示 一 捉 字符 ， 如 "www.haut.edu.cn"、' 中 国 '。 

字符 串 类 型 应 使 用 双 引 号 (") 或 单 引号 () 括 起 来 。 

在 写 JavaScript 脚本 时 ， 可 能 会 要 在 HIML 文档 中 显示 或 使 用 某 些 特殊 字符 (例如 : 引号 或 斜 线 ), 例 
如 : <img src="image5.jpg">， 但 是 前 面 提 过 ， 声 明 一 个 字符 串 时 ， 前 后 必须 以 引号 括 起 来 。 如 此 一 来 ， 字 
符 串 当中 引号 可 能 会 和 标示 字符 串 的 引号 搞 混 了 ， 此 时 就 要 使 用 转 义 字符 〈Escape Character)。 

JavaScript 使 用 以 下 八 种 转 义 字符 。 这 些 字 符 都 是 以 一 个 反 斜 线 〈\) 开始 。 当 JavaScript 的 解释 器 
(Interpreter) 看 到 反 斜 线 时 ， 就 会 特别 注意 ， 表 现 出 程序 员 所 要 表达 的 意思 。 

表 14-1 列 出 了 JavaScript 的 转 义 序列 以 及 它们 所 代表 的 字符 。 其 中 有 两 个 转 义 序列 是 通用 的 ， 通 过 把 
Latin-1 或 Unicode 字符 编码 表示 为 十 六 进 制 数 ， 它 们 可 以 表示 任意 字符 。 例 如 ， 转 义 序列 \xA9 表示 的 是 版 
权 符 号 , 它 采 用 十 六 进 制 数 A9 表示 Latin-1 编码 。 同 样 的 , \u 表示 的 是 由 四 位 十 六 进 制 数 指定 的 任意 Unicode 
字符 ， 如 \u03c0 表示 的 是 字符 xn (圆周 率 )。 


表 14-1 JavaScript 的 转 义 序列 以 及 它们 所 代表 的 字符 


序 转 义 字符 使 用 说 明 


0 v0 NUL 字符 (\u0000) 

1 vb 后 退 一 格 (Backspace) 退 格 符 (\n0008) 

2 上 换 页 (Form Feed) (\u000C) 

3 un 换行 (New Line) (000A) 

4 Y 回 车 (Carriage Return)(\n000D) 

和 上 制 表 (Tab) 水 平 制 表 符 《〈vu0009) 

6 和 单 引 号 〈\u0027) 

党 和 双 引 号 〈\u0022) 

8 \ 反 和 斜 线 (Backslash) (Wu005C) 

9 Ww 垂直 制 表 符 (\n000B) 

10 uNN 由 两 位 十 六 进 制 数 值 NN 指定 的 Latin-1 字符 

11 WNNNNN 由 四 位 十 六 进 制 数 NNNN 指定 的 Unicode 字符 
由 一 位 到 三 位 八进制 数 〈1 到 377) 指定 的 Latin-1 字符 。 

外 WEN ECMAScript v3 不 支持 ， 不 要 使 用 这 种 转 义 序列 


注意 ， 虽 然 ECMAScript v1 标准 要 求 使 用 Unicode 字符 转 义 ， 但 是 JavaScript 1.3 之 前 的 版 本 通常 不 支 
持 转 义 符 。 有 些 JavaScript 版 本 还 允许 用 反 和 斜 线 符合 后 加 三 位 八进制 数字 来 表示 Latin-1 字符 ， 但 是 
ECMAScript v3 标准 不 支持 这 种 转 义 序列 ， 所 以 不 应 该 再 使 用 它们 。 


1. 字符 串 的 使 用 
JavaScript 的 内 部 特性 之 一 就 是 能 够 连接 字符 串 。 如 果 将 加 号 〈+) 运算 符 用 于 数字 ， 那 就 是 把 两 个 数 
字 相 加 。 但 是 ， 如 果 将 它 作用 于 字符 串 ， 它 就 会 把 这 两 个 字符 串 连 起 来 ， 将 第 二 个 字符 串 连接 在 第 一 个 字 
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符 串 之 后 ， 例 如 : 
【 例 14-7】 实例 文件 ，ch14\Chap14.7.html〉 连 接 字符 串 实例 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> New Document </title> 
</head> 

<body> 

<script> 

var msg = "hello"7 

msg = msg + "world";  ”// 连 接 字 符 囊 
alert (msg); 

</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap14.7.html 文件 。 在 正 浏览 器 中 字符 串 连接 运行 的 结果 如 图 14-8 所 示 。 


图 14-8 字符 串 连 接 运行 结果 


如 果 想 要 确定 一 个 字符 串 的 长 度 〈 它 包含 字符 的 个 数 )， 用 户 就 可 以 使 用 字符 串 的 length 属性 ， 如 果 变 
量 s 包含 一 个 字符 串 ， 可 以 使 用 如 下 的 方法 访问 它 的 长 度 : s.length: 
【 例 14-8】 〈 实 例文 件 ，chl4\Chap14.8.html) 计算 字符 串 长 度 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> New Document </title> 
</head> 

<body> 

<script> 

var str = "I love Javascript! "; 
alert ("I love Javascript! 的 字符 个 数 : " + str.length);  // 在 页 面 弹出 字符 囊 长 度 
</script> 

</body> 

</html> 


相关 的 实例 请 参考 Chap14.8.html 文件 。 在 正 浏览 器 中 运行 的 结果 如 图 14-9 所 示 。 从 结果 中 可 以 看 到 
字符 串 的 长 度 已 经 计算 出 来 。 

根据 字符 串 的 length 属性 ， 可 以 对 其 进行 许多 操作 ， 例 如 ， 可 以 获取 字符 串 s 的 最 后 一 个 字符 ; 

last_char = s.charAt (s.length - 1); 
因为 length 是 一 个 字符 串 的 长 度 ， 即 字符 串 的 个 数 ， 而 字符 串 中 的 首 字 符 是 从 0 开始 的 ， 所 以 最 后 一 
个 字符 在 字符 串 中 的 位 置 为 length-1。 
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亲 忆 网 页 的 计时 x 
全 1love Javascript 1 的 字符 人 数 : 18 


14-9 计算 字符 串 的 长度 


2. 字符 串 的 大 小 写 转 换 
使 用 字符 串 对 象 中 的 toLocaleLowerCase()、toLocaleUpperCase()、toLowerCase()、toUpperCase0 方 法 可 
以 转换 字符 串 的 大 小 写 。 这 四 种 方法 的 语法 格式 如 下 ; 


stringobject.toLocaleLowerCase () 
stringobject.toLowercase () 
stringobject.toLocaleUppercase () 
stringobject. toUppercase () 


【 例 14-9】 (实例 文件 ，chl4\Chap14.9.html) 字符 串 的 大 小 写 转换 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> New Document </title> 

</head> 

<script type="text/javascript"> 

var txt="Hello World!" 

document .write ("正常 显示 为 : ”+ txt + "</p>") 

document .write ("以 小 写 方式 显示 为 ; " + txt.toLowerCcase() + "</p>") 
document .write ("以 大 写 方式 显示 为 : " + txt.toUpperCase() + "</p>") 

document .write ("按照 本 地 方式 把 字符 串 转 化 为 小 写 : " + txt.toLocaleLowerCase() + "</p>") 
document .write ("按照 本 地 方式 把 字符 串 转 化 为 大 写 : " + txt.toLocaleUpperCcase() + "</p>") 


</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap14.9.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-10 所 示 。 


baa 口 x 
司 iIfm201710Veve P -6 | 要 New Document 

文 作 (D。 闪 绍 上) 全 看 [V) 。 收 昔 交 (A) 工具 IT) 震动 (H) 

正常 显示 为 ，Hello World! 到 
以 J 写 方 式 显示 为 ，hello world! 

以 大 写 方式 显示 为 :HELLO WORLD! 
按照 本 地 方式 把 字符 串 转化 为 小 写 ，helle warld! 
按 昭 本 地 方式 把 字符 替 转 化 为 大 写 : HELLO WORLD! 


图 14-10 字符 串 的 大 小 写 转换 结果 


14.4.5 ”数值 类 型 
JavaScript 数值 类 型 表示 一 个 数字 ， 如 5、12、-5、2e5 等 ， 在 JavaScript 中 数值 类 型 有 1 
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数 等 类 型 。 
【 例 14-10】 实例 文件 ，ch14\Chap1410.html) 输 出 数值 。 


相关 的 代码 实例 请 参考 Chap14.10.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-11 所 示 。 


图 14-11 输出 数值 
提示 : JavaScript 中 只 有 一 种 数字 类 型 ， 而 且 内 部 使 用 的 是 64 位 浮 点 型 , 等同 于 CH 或 Java 中 的 double。 


14.4.6 ”对 象 类 型 


Object 是 对 象 类 型 ， 该 数据 类 型 中 包括 Object、Function、String、Number、Boolean、Array、Regexp、 
Date、Globel、Math、Error， 以 及 宿主 环境 提供 的 object 类 型 。 
【 例 14-11】 (实例 文件 ，chl4\Chap14.11.html) Object 数据 类 型 的 使 用 。 
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相关 的 代码 实例 请 参考 Chap14.11.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-12 所 示 。 


总 “三 党 
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Bill is 56 years old. 


14-12 ”使 用 Object 数据 类 型 的 结果 


14.5 ”运算 符 


运算 符 是 在 表达 式 中 用 于 进行 运算 的 符号 ， 例 如 运算 符 “=” 用 于 赋值 、 运 算 符 “+” 用 于 把 数值 加 起 
来 ， 使 用 运算 符 可 进行 算术 、 赋 值 、 比 较 、 逻 辑 等 各 种 运算 。 


14.5.1 运算 符 概 述 


运算 符 用 于 执行 程序 代码 运算 ， 会 针对 一 个 以 上 操作 数 项 目 来 进行 运算 。 例 如 : 2+3， 其 操作 数 是 2 和 
3， 而 运算 符 则 是 “+” JavaScript 的 运算 符 可 以 分 为 算术 运算 符 、 逻 辑 运算 符 、 位 运算 符 、 赋 值 运算 符 、 
条 件 运算 符 、 位 操作 运算 符 和 字符 串 运算 符 等 。 


14.5.2 ”赋值 运算 符 


回 
赋值 运算 符 是 将 一 个 值 赋 给 另 一 个 变量 或 表达 式 的 符号 。 最 基本 的 赋值 运算 符 为 “=” 主要 用 于 将 运 
算 符 右边 的 操作 数 的 值 赋 给 左边 的 操作 数 。 
【 例 14-12】 〈 实 例文 件 ， chl4\Chap14.12.html) 赋值 运算 符 的 应 用 。 
<!DOCTYPE HTML> 
<html> 
<head> 


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Content-Language" content="UTF-8"/> 


<body> 
<script language="Javascript" type="text/javascript"> 
var president = "henan"; // 字 符 囊 型 

var pi =3.14159; // 数 值 型 

var visited = false; // 净 辑 型 


// 将 以 上 三 种 类 型 合并 输出 

document .write( "president: "+president +"<p>"+"pi: "+pi+"<p>"+"visited: "+visited); </script> 
</body> 

</head> 

</html> 


相关 的 代码 实例 请 参考 Chap14.12.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-13 
所 示 。 
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president: jiangzi 


pi 3.14159 


visited: false 


图 14-13 ”赋值 运算 符 的 应 用 结果 


另外 ,在 JavaScript 中 ， 赋 值 运算 符 还 可 与 算术 运算 符 和 位 运算 符 组 合 ， 从 而 产生 许多 变种 。 在 赋值 运 
算 符 中 ， 除 “=” 运 算 符 之 外 ， 其 他 运算 符 都 是 先 将 运算 符 两 边 的 操作 数 做 相关 处 理 ， 将 处 理 之 后 的 结果 赋 
给 运算 符 左 操作 符 。 如 操作 符 “-=”， 先 将 两 个 操作 数 相 减 ， 再 将 结果 赋 给 左 操作 数 。 

【 例 14-13】 (实例 文件 ， chl4\Chap14.13.html) 赋值 运算 符 的 复杂 应 用 。 
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相关 的 代码 实例 请 参考 Chap14.13.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-14 
所 示 。 


二 目光 
|(@ DE Sue 


局 ,paran=8. 4 
，Daras-2, 4000000000000003 
aran=2 


对 变量 法 行 >)= z 欣 作 局 ，paran=2 
)= 2 操作 后 ，paran=0 


14-14 ”赋值 运算 符 的 复杂 应 用 结果 


14.5.3 ”算术 运算 符 


和 

算术 运算 符 用 于 各 类 数值 之 间 的 运算 ，JavaScript 的 算术 运算 符 包括 加 (+)、 减 (-)、 乘 (*)、 除 (/)、 
求 余 (%)、 自 增 (++)、 自 减 (--) 共 7 种 。 算 术 运 算 符 是 比较 简单 的 运算 符 ， 也 是 在 实际 操作 中 经 常用 
到 的 操作 符 。 


【 例 14-14】“〈 实 例文 件 ，chl4\Chap14.14.html) 算术 运算 符 的 应 用 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 算 术 运 算 符 </title> 
<script language="JavaScript" type="text/javaScript"> 
function calcoOprt () 
{ 
Var param = 25; 
document .write ("数值 X=" + param + "<br>"); 
param = param + 87 
document .write ("加 法 运算 (加 8 ) 结果 : " + param + "<br>"); 
Param = param 一 9; 
document .write ("减法 运算 ( 减 9) 结果 : " + param + "<br>"); 
param = param * 3; 
document .write ("乘法 运算 ( 乘 3) 结果 : " + param + "<br>"); 
param = param / 6; 
document .write ("除法 运算 ( 除 6 ) 结果 : "+ param + "<br>"); 
param = param % 7; 
document .write (" 取 余 运算 ( 与 7 取 余 ) 结果 : " + param + "<br>"); 
paramt+; 
document .write (" 自 增 运算 结果 : " + param + "<br>"); 
Param——; 
document .write (" 自 减 运算 结果 : " + param + "<br>"); 
Var testl = paramt+; 
document .write (" 自 增 运算 符 在 后 的 结算 结果 : " + test1l1 + "， 自 增 之 后 的 值 : " + param + "<br>"); 
Var test2 = ++param; 


document .write (" 自 增 运算 符 在 前 的 运算 结果 : "+ test2 + "，, 自 增 之 后 的 值 : ”+ param)， 
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} 

</script> 

</head> 

<body> 

<form method=post action="#"> 

<input type="button" value=" 算 术 运 算 " onclick="calcOprt()"> 


</form> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap14.14.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-15 
所 示 。 


- 口 x 
站 cNuceraqiangupoec D - 0 | 展 其 下 运算 行 
文人 站。 鲍 强 (二 看 | 。 以 六 天 (A)。 工具 (T】 帮 肥 H) 


和 莽 本 运算 


14-15 算术 运算 符 的 应 用 结果 


单 击 页 面 中 的 “算术 运算 ”按钮 后 , 使 用 JavaScript 算术 运算 符 进行 相关 运算 , 具体 运行 结果 如 图 14-16 
所 示 。 


- 0O x 
| 国 cuseremiangu\poc 甩 -6 | 感 cyuxcoNqiengupo- x 
交 伯 六。 本 看 MV 收 巷 ztA。 工具 [各 RH) 


数值 X=25 

加 法 运算 (加 8) 结果 ，33 
富生 运算 【 减 9) 结 时 24 
乘法 运算 ( 乘 3) 结 具 ，72 


汪 和 

取 余 运算 【与 7 取 余 ) 结果 ，5 
增 运 1 6 

自 减 运 


运算 结果 ，5 
自 增 运算 罕 在 后 的 结 秘 结 果 ，5， 自 增 之 后 的 值 ，6 
自 增 运算 符 在 前 的 运算 结果 :7， 自 增 之 后 的 值 ， 7 


图 14-16 显示 运算 结果 


提示 : 算术 运算 符 中 需要 注意 自 增 与 自 减 运算 符 。 如 果 ++ 或 一 运算 符 在 变量 后 面 ， 执 行 的 顺序 为 “ 先 
赋值 后 运算 ”; 如 果 ++ 或 一 运算 符 在 变量 前 面 ， 执 行 顺序 则 为 “ 先 运算 后 赋值 ”。 


14.5.4 ”比较 运算 符 


比较 运算 符 在 逻辑 语句 中 使 用 ， 用 于 连接 操作 数组 成 比较 表达 式 ， 并 对 操作 符 两 边 的 操作 数 进行 比较 ， 
其 结果 为 逻辑 值 hue 或 false。 
【 例 14-15】 (实例 文件 :chl4\Chap14.15.html) 比较 运算 符 的 应 用 。 


<!DOCTYPE html> 
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<html> 

<head> 

<title> 比 较 运算 符 </title> 

<body> 

<script language="JavaSscript" type="text/javascript"> 
var param = 15; 
document -write(" 当 前 变量 值 : param=" + param + "<br>"); 
document .write ("变量 == 15 的 结果 : " + (param == 15) + "<br>"); 
document .write ("变量 != 15 的 结果 : " + (param != 15) + "<br>"); 
document .write ("变量 > 15 的 结果 : " + (param > 15) + "<br>"); 
document .write ("变量 >= 15 的 结果 : " + (param >= 15) + "<br>"); 
document .write ("变量 < 15 的 结果 : " + (param < 15) + "<br>"); 
document .write ("变量 <= 15 的 结果 : " + (param <= 15) ); 

</script> 

</body> 

</head> 

</html> 


相关 的 代码 实例 请 参考 Chap14.15.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-17 
所 示 。 


二 口 x 
人 CUsers\qiangu\Doc P - 上司 tia x 
文件 (F) ”六 壹 (E) 音 看 (V) 收藏 突 (A) 工具 (T) 帮助 (H) 
当前 变量 值 ，param=15 
变量 结果 ，true 
变量 != 15 的 结果 ，false 
变量 》15 的 结果 ，false 
变量 >= 15 的 结果 ，true 
变量 < 15 的 结果 ，false 
变量 (= 15 的 结果 ，true 


14-17 ”比较 运算 符 的 应 用 结果 


注意 : 在 各 种 运算 符 中 ， 比 较 运 算 符 “一 ”与 赋值 运算 符 “=” 是 完全 不 同 的 : 运算 符 “=” 是 用 于 给 
操作 数 赋值 ; 而 运算 符 “==-” 则 是 用 于 比较 两 个 操作 数 的 值 是 否 相等 。 

如 果 在 需要 比较 两 个 表达 式 的 值 是 否 相等 的 情况 下 ， 错 误 的 使 用 赋值 运算 符 “=”， 则 会 将 右 操作 数 的 
值 赋 给 左 操作 数 。 

【 例 14-16】 实例 文件 ，ch14\Chap14.16.html》 区 别 比较 运算 符 和 赋值 运算 符 的 应 用 。 

<!DOCTYPE HTML> 

<html> 

<head> 

<title> 比 较 运 算 符 和 赋值 运算 符 的 区 别 </title> 

<body> 

<script language="Javascript" type="text/javascript"> 


var param; 

param=15; 

var testl=(param==15); 

var test2=(param=15); 

document .write ("执行 语句 test1= (param==15) 后 的 结果 为 : " + testl + "<br>"); 
document -write ("执行 语句 test2= (param=15) 后 的 结果 为 : ”+ test2 ) 7 
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</script> 
</body> 
</head> 
</html> 


相关 的 代码 实例 请 参考 Chap14.16.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-18 


所 示 。 


- OO x 
司 cAUsers\qiangu\Doc 中 ”0 | 辣 比 蒋 运算 行 和 唉 值 运 。 x 
文件 费 疆 (5) ”查看 (V) 。 收 意 夫 (A) 工具 (T) 。 帮助 (H) 


执行 语句 test1=(param==15) 后 的 结果 为 ，true 
执行 语句 test2= (paran=15) 后 的 结果 为 ，15 


图 14-18 区 别 比较 运算 符 和 赋值 运算 符 的 应 用 结果 
从 运行 结果 中 可 以 看 出 ,语句 执 行 “param 一 15” 后 返回 结果 为 逻辑 值 tue， 然 后 通过 赋值 运算 符 “=” 


将 其 赋 给 变量 test1， 因 此 testl 最 终 的 结果 为 trwe; 同 理 ， 语 句 执行 “param=15” 后 返回 结果 为 15 并 将 其 
赋 给 变量 test2。 


14. 


5.5 ”逻辑 运算 符 
逻辑 运算 符 用 于 测定 变量 或 值 之 间 的 逻辑 ， 操 作 数 一 般 是 逻辑 型 数据 。 在 JavaScript 中 ， 逻辑 运算 符 包 


含 逻 辑 与 (&&)、 罗 辑 或 〈I)、 逻 辑 非 〈!) 等 。 在 逻辑 与 运算 中 ， 如 果 运 算 符 左边 的 操作 数 为 false， 系 统 
将 不 再 执行 运算 符 右边 的 操作 数 ， 在 逻辑 或 运算 中 ， 如 果 运 算 符 左边 的 操作 数 为 tue， 系 统 同样 不 再 执行 
右边 的 操作 数 。 
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【 例 14-17】 〈 实 例文 件 ，chl4\Chap14.17.html) 逻辑 运算 符 的 应 用 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 迎 辑 运算 符 </title> 
<body> 
<script language="JavaScript" type="text/javascript"> 
Var score = 350; 
document -write ("当前 的 库存 数量 是 : ”+ score + ".<br>"); 
Var testl = ((score > 200) && (score <= 500)); 
document .write ("库存 数量 是 否 大 于 200 并 且 小 于 等 于 500: " + testl + "<br>"); 
var test2 = ((score > 400) 11 (score == 500)); 
document .write ("库存 数量 是 否 大 于 400 或 等 于 500: " + test2 + "<br>"); 
document -write ("库存 数量 小 于 200, 是 否 提货 的 结果 是 : "+ (! (score < 200)) + "<br>"); 
document .write ("库存 数量 是 否 小 于 200: ”+ ((score < 200) && (score = 500)) + "<br>"); 
document .write ("执行 (score < 200) ss (score = 500) 之 后 的 数量 : " + score + "<br>"); 


document .write ("库存 数量 是 否 大 于 200: " + ((score > 200) 11 (score = 500)) + "<br>"); 
document .write ("执行 (score > 200) 11 (score = 500) 之 后 的 数量 : " + score); 
</script> 
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</body> 

</head> 

</html> 

相关 的 代码 实例 请 参考 Chap14.17.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-19 
所 示 。 


图 CUsers\qiangu\Doc 只 - 上 | 大 于 雪 运算 答 
文 伯 有” 病 得 日 ”下 看) 收 茂 闪 A) 工具 (T 大 动 (H) 


当前 的 库存 数量 是 ，3: 
re true 
库存 数量 是 否 大 于 400 或 等 于 500: false 
库存 数量 小 于 200， “是 要 全 的 结果 是 true 
数量 是 否 小 于 200，false 
执行 (score 《< 200) 证 (score = 500) 之 后 的 数量 ，350 
库存 数量 是 否 大 于 200: true 
执行 (score 》200) || (score = 500) 之 后 的 数量 ，350 


14-19 ”逻辑 运算 符 的 应 用 结果 


从 运行 结果 中 可 以 看 出 : 逻辑 与 、 逻 辑 或 是 短路 运算 符 。 在 表达 式 “(score < 200) && (score = 500)” 
中 ， 由 于 条 伯 score<200 结果 为 false， 程 序 将 不 再 继续 执行 “&&” 之 后 的 脚本 ， 因 此 ，score 的 值 仍 为 
350; 同 理 ， 在 表达 式 “(score > 200) || (score = 500)” 中 ， 条 件 score>200 结果 为 tue，score 的 值 仍然 
为 350。 


14.5.6 条件 运算 符 


条 件 运 算 符 是 构造 快速 条 件 分 支 的 三 目 运算 符 , 可 以 看 作 是 if…else 语句 的 简写 形式 , 其 语法 形式 为 “ 逻 
辑 表达 式 ? 语 句 1: 语 句 2;:”。 如 果 “?” 前 的 逻辑 表达 式 结果 为 tue， 则 执行 “?” 与 “:” 之 间 的 语句 1， 否 
则 执行 语句 2。 由 于 条 件 运 算 符 构成 的 表达 式 带 有 一 个 返回 值 ， 因 此 ， 可 通过 其 他 变量 或 表达 式 对 其 值 进 
行 引用 。 

【 例 14-18】〗】“〈 实 例文 件 ， chl4\Chap14.18.html) 条 件 运算 符 的 应 用 。 

<!DOCTYPE HTML> 

<html> 

<head> 

<title> 条 件 运算 符 </title> 

<body> 

<script language="JavaSscript" type="text/javascript"> 


Var x=23; 

0 

document .write ("当前 变量 为 : x=" + x +"<br>"); 
document .write ("执行 语句 (y = x < 10 ? x : -x) 后 ,结果 为 : y=" + 了 ); 
</script> 

</body> 

</head> 

</html> 


相关 的 代码 实例 请 参考 Chap14.18.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-20 
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所 示 。 


种 口 x 
@ 国 cWseraqimnguDor -0 | 车 SEE 

文件 月 名 和 (EF】 可 看 V) 必 吉 天 (A 工具 (T 才 钝 (H) 

当前 变量 为 ，x=23 

执行 语句 (> = x《 10 ? x : -x) 后 ， 结 果 为 ，y=-23 


14-20 ”条件 运算 符 的 应 用 结果 
从 运行 结果 中 可 以 看 出 ， 首 先 语句 对 表达 式 “x < 10” 成 立 与 否 进行 判断 ， 结 果 为 false， 然 后 根据 判断 


结果 执行 “: ”后 的 表达 式 “-x”， 并 通过 赋值 符号 将 其 赋 给 变量 y， 因 此 变量 y 最 终 的 结果 为 -23。 


14. 


5.7 ”字符 串 运 算 符 
字符 捉 运 算 符 是 对 字符 串 进行 操作 的 符号 , 一 般 用 于 连接 字符 牛 。 在 JavaScript 中 , 字符 趾 连 接 符 “+=” 


与 赋值 运算 符 类 似 ， 将 两 边 的 操作 数 〈 字 符 串 ) 连 接 起 来 并 将 结果 赋 给 左 操 作 数 。 


【 例 14-19】 实例 文件 ，ch14\Chap14.19.html)》 字 符 串 运 算 符 的 应 用 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<title> 字 符 串 运算 符 </title> 

<body> 

<script language="JavaScript" type="text/javascript"> 
Var param = ""; 
param = "好 好 学 习 , ”+ "天 天 向 上 ! "; 
document .write (param + "<br>"); 
param += "---- 静 轩 阁 "; 
document .write ("连接 结果 : " + param ); 

</script> 

</body> 

</head> 

</html> 


相关 的 代码 实例 请 参考 Chap14.19.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-21 


所 示 。 
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避 cWusersqiangupoc 人 D- 0 | 大字 x| 
文件 骨 。 篇 站 二 看 V) 收 B 夫 (A) 工具 帮助 (H) 


好 好 学 习 ， 天 天 向 上 ! 
连接 结果 : 好 好 学 习 ， 天 天 向 上 ! 一 一 静 轩 阁 


图 14-21 字符 串 运算 符 的 应 用 结果 
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14.5.8 位 运算 符 


位 运算 符 是 将 操作 数 以 二 进 制 为 单位 进行 操作 的 符号 。 在 进行 位 运算 之 前 ， 通 常 先 将 操作 数 转换 为 二 进 制 本 
整数 ， 再 进行 相应 的 运算 ， 最 后 的 输出 结果 以 十 进 制 整数 表示 。 此 外 ， 位 运算 的 操作 数 和 结果 都 应 是 整 型 。 
在 JavaScript 中 ， 位 运算 符 包含 按 位 与 〈&&)、 按 位 或 (|)、 按 位 异 或 (I )、 按 位 非 (0 等 。 
按 位 与 运算 : 将 操作 数 转换 成 二 进 制 以 后 ， 如 果 两 个 操作 数 对 应 位 的 值 均 为 1， 则 结果 为 1， 否 则 结果 
为 零 。 例 如 ， 对 于 表达 式 41&23， 41 转换 成 二 进 制 数 00101001, 而 23 转换 成 二 进 制 数 00010111， 
按 位 与 运算 后 结果 为 00000001， 转 换 成 十 进 制 数 即 为 1 。 

按 位 或 运算 : 将 操作 数 转换 为 二 进 制 后 ， 如 果 两 个 操作 数 对 应 位 的 值 中 任何 一 个 为 1， 则 结果 为 1， 否 
则 结果 为 零 。 例 如 ， 对 于 表达 式 41||23， 按 位 或 运算 后 结果 为 00111111， 转 换 成 十 进 制 数 为 63。 
按 位 异 或 运算 ， 将 操作 数 转 换 成 二 进 制 后 ， 如 果 两 个 操作 数 对 应 位 的 值 互 不 相同 时 ， 则 结果 为 1， 否 

则 结果 为 零 。 例 如 ， 对 于 表达 式 41^23， 按 位 异 或 运算 后 结果 为 00111110， 转 换 成 十 进 制 数 为 62。 
按 位 非 的 运算 : 将 操作 数 转换 成 二 进 制 后 ， 对 其 每 一 位 取 反 〈 即 值 为 0 则 取 1， 值 为 1 则 取 0)。 如 ， 
对 于 表达 式 一 41， 将 每 一 位 取 反 后 结果 为 11010110， 转 换 成 十 进 制 数 就 是 -42。 
【 例 14-20】 实例 文件 ，ch14\Chap14.20.html) 位 运算 符 的 应 用 。 
<!DOCTYPE HTML> 
<html> 
<head> 
<title> 位 运算 符 </title> 
<body> 
<script language="JavaSscript" type="text/javaScript"> 
document .write (" 按 位 与 41&23 结果 : " + (41 & 23) + "<br>"); 
document .write (" 按 位 或 41123 结果 : " + (41 | 23) + "<br>"); 
document .write(" 按 位 异 或 41^23 结果 : " + (41 ^ 23) + "<br>"); 
document .write(" 按 位 非 ~41 结果 : "+ (~41) ); 
</script> 
</body> 
</head> 
</html> 


相关 的 代码 实例 请 参考 Chap14.20.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-22 
所 示 。 


- 0O x 
@ 可 CAuaernqirewpoc 户 - 6| 车 bg 
文件 了 MED HEV WRN 工 RD HMO) 
与 41823 结 果 ，1 
或 41123 结 果 ，63 


图 14-22 ”位 运算 符 的 应 用 结果 


14.5.9 ” 移 位 运算 符 


移 位 运算 符 与 位 运算 符 相 似 ， 都 是 将 操作 数 转换 成 二 进 制 ， 然 后 对 转换 之 后 的 值 进行 操作 。JavaScript 
位 操作 运算 符 有 3 个 : <<、>>、>>>。 
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【 例 14-21】 实例 文件 ，ch14\Chap14.21.html)》 移 位 运算 符 的 应 用 。 


<!DocTYPE HTML> 

<html> 

<head> 

<title> 移 位 运算 符 </title> 

<body> 

<script language="JavaScript" type="text/javascript"> 
var param = 25; 
document -write(" 当 前 变量 值 : param=" + param + "<br>"); 
document .write ("变量 <<2 的 结果 : " + (param << 2) + "<br>"); 
document .write ("变量 >>2 的 结果 : " + (param >> 2) + "<br>"); 
document .write ("变量 >>>2 的 结果 : " + (param >>> 2) + "<br>"); 
param = -28; 
document .write ("当前 变量 值 ; param=" + param + "<br>"); 
document .write ("变量 <<2 的 结果 : " + (param << 2) + "<br>"); 
document .write ("变量 >>2 的 结果 : " + (param >> 2) + "<br>"); 
document .write ("变量 >>>2 的 结果 : " + (0 + (param >>> 2)) ); 

</script> 

</body> 

</head> 

</html> 


相关 的 代码 实例 请 参考 Chap14.21.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-23 
所 示 。 


全 CMUcereaiarguDoe PD © | BBEE 
文 伯 ( 病 纺 EE】 二 看 () 收藏 交 A| 工具 [T)。 才 基 (IH) 


变量 >>?2 的 结果 ，6 
当前 变量 值 ，paran 一 28 
变量 12 


图 14-23 移 位 运算 符 的 应 用 结果 


上 述 代码 的 运行 过 程 如 下 首先 将 十 进 制 数 25 转换 成 二 进 制 为 00011001， 然 后 将 其 左 移 2 位 ， 右 边 
的 空位 由 0 补 齐 , 结果 为 01100100,， 转换 成 十 进 制 数 即 为 100; 将 其 进行 算术 右 移 2 位 ,结果 是 00000110， 
转换 成 十 进 制 为 6， 将 其 逻辑 右 移 2 位 ， 因 其 为 正 数 ， 结 果 仍 为 6。 同 理 ， 十 进 制 数 -28 转换 成 二 进 制 是 
11100100， 将 其 左 移 2 位 后 为 10010000， 转 换 成 十 进 制 数 是 -112; 将 其 进行 算术 右 移 2 位 ， 得 到 的 结果 是 
11111001， 转 换 成 十 进 制 是 -7。 


14.5.10 ”其 他 运算 符 
除 前 面 介绍 的 几 种 之 外 ，JavaScript 运算 符 还 有 一 些 特殊 运算 符 ， 下 面 对 其 进行 简要 介绍 。 
1. 去 号 运算 符 


逗号 运算 符 用 于 将 多 个 表达 式 连接 为 一 个 表达 式 ， 新 表达 式 的 值 为 最 后 一 个 表达 式 的 值 。 其 语法 形式 
为 :“ 变 量 = 表达 式 1. 表 达 式 2”。 
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【 例 14-22】 (实例 文件 ，chl4\Chap14.22.html) 逗号 运算 符 的 应 用 。 


相关 的 代码 实例 请 参考 Chap14.22.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-24 
所 示 ， 从 运行 结果 中 可 以 看 到 ， 变 量 a 最 终 取 最 后 一 个 表达 式 〈d=45) 的 结果 作为 自己 的 值 。 


绸 和 2 和 45) ”后 ， 变 量 a 的 值 为 ，a = 45 


图 14-24 去 号 运算 符 的 应 用 结果 


2. void 运算 符 

void 运算 符 对 表达 式 求 值 ， 并 返回 undefined。 该 运算 符 通常 用 于 避免 输出 不 应 该 输出 的 值 ， 其 语法 形 
式 为 “void 表达 式 ”。 

【 例 14-23】〗 《实例 文件 ，chl4\Chap14.23.html) void 运算 符 的 应 用 。 


ES 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 
We 


document .write ("执行 语句 "a = void(b=17，c=28，d=45) "后 ,变量 a 的 值 为 : a = "+a); 
</script> 

</body> 

</head> 

</html> 


相关 的 代码 实例 请 参考 Chap14.23.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-25 
所 示 ， 从 运行 结果 中 可 以 看 到 ， 变 量 a 最 终 被 标记 为 “(undefined)”。 


x 
装 cAUsers\qangu\Dpocum P - 5 | 三 void 运算 全 x 次 图 
文件 (F)。 坊 罚 (E) ”至 看 (V) 。 收 意 夫 (A) 工具 中 帮 坟 (H) 


变量 4 的 当前 值 为 ，d= 45 
执行 语句 “a = void(b=17，c=28，d=45) ”后 ， 变 量 a 的 值 为 a = undefined 


14-25 ”viod 运算 符 的 应 用 结果 


3. typeof 运算 符 

typeof 运算 符 是 返回 一 个 字符 串 指明 其 操作 数 的 数据 类 型 ， 返回 值 有 六 种 可 能 : number、 string、boolean、 
object、function 和 undefined。typeof 运算 符 的 语法 形式 为 “typeof 表达 式 ”。 

【 例 14-24】〈 实 例文 件 ， chl4\Chap14.24.html) typeof 运算 符 的 应 用 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<title>typeof 运算 符 </title> 

<body> 

<script language="javascript"> 

var x = 37 

var y = null; 

var sex = "boy"; 

document .write ("<p> 执 行 语句 "typeof x" 后 ,可 以 看 出 变量 x 类 型 为 : "+(typeof x)); 
document .write ("<p> 执 行 语句 "typeof Y" 后 ,可 以 看 出 变量 了 类 型 为 : "+ (typeof y)); 
document .write ("<p> 执 行 语句 "typeof sex" 后 ,可 以 看 出 变量 sex 类 型 为 : "+ (typeof sex)); 
</script> 

</body> 

</head> 

</html> 


相关 的 代码 实例 请 参考 Chap14.24.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-26 
所 示 ， 从 运行 结果 中 可 以 看 到 ，null 类 型 的 操作 数 的 返回 值 为 object。 


x 
@ 辣 CeerasinguiDocm ~ C|[ 局 ypcopE » 安 氏 外 
文 作 们 问 委 (E) 坦 看 (V) 收 京 夫 (。 工 琴 站 ”大玉 () 


执行 语句“typeof x” 后 ， 可 以 看 出 交 量 * 类 型 为 ，numbsr 
执行 语句 “typeof >” 后 ， 可 以 看 出 变量 * 类 型 为 ，cbject 
执行 语句 “typeof sex” 后 ， 可 以 看 出 变量 3ex 类 型 为 :strins 


图 14-26 typeof 运算 符 的 应 用 结果 
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14.6 ”运算 符 优先 级 


回 
在 JavaScript 中 ,运算 符 具 有 明确 的 优先 级 与 结合 性 。 优先 级 用 于 控制 运算 符 的 执行 顺序 ， 具 有 较 高 优 
先 级 的 运算 符 先 于 较 低 优先 级 的 运算 符 执 行 ， 结 合 性 则 是 指 具 有 同等 优先 级 的 运算 符 将 按照 怎样 的 顺序 进 
行 运算 ， 结 合 性 有 向 左 结合 和 向 右 结合 。 圆 括号 可 用 来 改变 运算 符 优先 级 所 决定 的 求 值 顺序 。 
【 例 14-25】 实例 文件 ，ch14\Chap14.25.html》 用 0 改变 运算 顺序 的 应 用 。 


<!DOCTYPE HTML> 
<html> 

<head> 

<title> 运 算 符 优 先 级 </title> 

<body> 

<script language="javascript"> 

var a = 3+4*5; // 按 照 自动 优先 级 进行 
var b = (3+4)*57 // 用 () 改变 运算 优先 级 
alert ("3+4+5="tat"\n(3+4)*5="+b); ”// 分 行 输出 结果 
</script> 

</body> 

</head> 

</html> 


相关 的 代码 实例 请 参考 Chap14.25.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-27 
所 示 。 


站 cAUsers\qiangu\Doc  ”X | 中 运算 符 优 先 级 


来 皇 网 页 的 消息 


3+4"5=23 
G3+4)"5=35 


14-27 用 () 改 变 运算 顺序 的 应 用 结果 
从 运行 结果 中 可 以 看 到 ， 由 于 乘法 的 优先 级 高 于 加 法 ， 因 此 ， 表 达 式 “3+4*5” 的 计算 结果 为 23， 而 在 表达 
式 “(3+4)*5” 中 则 被 圆 括号 “0 ”改变 运算 符 的 优先 级 ， 括 号 内 部 分 将 优先 于 任何 运算 符 而 被 最 先 执行 ， 
因此 该 语句 的 结果 为 35。 


人 » 国 
14.7 ”表达 式 语 名 
[ol 
表达 式 语句 是 JavaScript 中 最 简单 的 语句 ， 赋值、 删除 delete)、 函 数 调用 这 三 类 即 是 表达 式 ， 又 是 语 
句 ， 所 以 叫 作 表达 式 语句 。 


1. 赋值 语句 
赋值 语句 是 JavaScript 程序 中 最 常用 的 语句 , 在 程序 中 , 往往 需要 大 量 的 变量 来 存储 程序 中 用 到 的 数据 ， 
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所 以 用 来 对 变量 进行 赋值 的 赋值 语句 也 会 在 程序 中 大 量 出 现 。 赋 值 语句 的 语法 格式 如 下 : 
变量 名 = 表达 式 
当 使 用 关键 字 var 声明 变量 时 ， 可 以 同时 使 用 赋值 语句 对 声明 的 变量 进行 赋值 。 
例如 ， 声 明 一 些 变量 ， 并 分 别 给 这 些 变量 赋值 ， 代 码 如 下 : 


另外 ， 递 增 运算 符 ++) 和 递减 运算 符 〈 一 ) 和 赋值 语句 有 关 ， 它 们 的 作用 是 改变 一 个 变量 的 值 ， 就 
像 执行 一 条 赋值 语句 一 样 ， 代 码 如 下 : 


2. 删除 (delete) 


delete 是 JavaScript 语言 中 使 用 频率 较 低 的 操作 之 一 ， 但 是 有 些 时 候 ， 需 要 做 delete 或 者 清空 动作 时 ， 
就 需要 delete 操作 。 如 下 面 代码 会 删除 对 象 的 属性 ; 


3. 函数 调用 
函数 中 的 代码 在 函数 被 调用 后 执行 ， 函 数 调用 也 属于 表达 式 语句 中 的 一 种 类 型 。 
【 例 14-26】 《实例 文件 ， chl4\Chap14.1.html) 函数 调用 表达 式 语句 的 应 用 。 


相关 的 代码 实例 请 参考 Chap14.26.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-28 
所 示 。 
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全 口 x 
司 cwsersaingnpoe PP - 6 | 大 Bxa 岂 

文件 (有 六 和 (E) 二 看 (V】 要 划 夫 /AA) 工具 Tm 帮助 

全 局 函数 (nyFunction) 返回 参数 相 乘 的 结果 : 


20 


图 14-28 函数 调用 表达 式 语句 的 应 用 结果 


提示 :JavaScript 语句 以 分 号 结束 ,但 表达 式 不 需要 分 号 结尾 . 一旦 在 表达 式 后 面 添加 分 号 , 则 JavaScript 
就 将 表达 式 视 为 语句 ， 这 样 会 产生 一 些 没有 任何 意义 的 语句 。 

1+3 ; 

abc'7 


14.8 条件 判 断 语句 


条 件 判断 语句 是 一 种 比较 简单 的 选择 结构 语句 ， 它 包括 站 语句 及 其 各 种 变种 ， 以 及 switch 语句 。 这 些 
语句 各 具 特 点 ， 在 一 定 条 件 下 可 以 相互 转换 。 


14.8.1 j 半 语句 


让 语句 是 最 常用 的 条 件 判断 语句 ， 通 过 判断 条 件 表达 式 的 值 为 tue 或 false， 来 确定 程序 的 执行 顺序 。 
在 实际 应 用 中 ， 让 语句 有 多 种 表现 形式 ， 最 简单 的 站 语句 的 应 用 格式 为 : 
if (conditions) 
{ 
statements; 
} 


条 件 表 达 式 conditions 必须 放 在 小 括号 里 ， 当 且 仅 当 该 表达 式 为 真 时 , 执行 大 括号 内 包含 的 语句 ,否则 
将 跳 过 该 条 件 语句 执行 其 下 的 语句 。 大 括号 “{}” 的 作用 是 将 多 余 语 句 组 合成 一 个 语句 块 ， 系 统 将 该 语句 
块 作为 一 个 整体 来 处 理 。 如 果 大 括号 中 只 有 一 条 语句 ， 则 可 省 略 “{}”。 

【 例 14-27】 实例 文件 ，ch14\Chap14.27.html) 让 语句 的 应 用 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>if 语句 的 应 用 </title> 
</head> 
<body> 
<p> 如 果 时 间 旱 于 20:00, 会 获得 问候 "Good day".</p> 
<button onclick="myFunction() "> 获取 问候 </button> 
<p id="demo"></p> 
<script> 
function myFunction(){ 
Var x=""; 
var time=new Date() -getHours () 7 
if (time<20){ // 如 果 time 小 于 20 
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相关 的 代码 实例 请 参考 Chap14.27.html 文件 ， 然 后 双击 该 文件 , 在 正 浏览 器 中 运行 , 单 击 “ 获 取 问 候 ” 
按钮 ， 即 可 得 出 如 图 14-29 所 示 的 结果 。 


如 果 时 间 早 于 20:00， 会 获得 问候 “Geod day”。 


Good day 


图 14-29 if 语句 的 应 用 结果 
注意 : 请 使 用 小 写 的 让， 使 用 大 写字 母 (IF ) 会 生成 JavaScript 错误 ! 


14.8.2 if…else 语句 
让 …else 语句 选择 多 个 代码 块 之 一 来 执行 ， 具 体 语法 格式 如 下 : 


例如 ; 当时 间 小 于 20:00 时 ， 生 成 问候 “Good day”， 否 则 ， 生 成 问候 “Good evening”。 
【 例 14-28】 实例 文件 ，ch14\Chap14.28.html》f…else 语句 的 应 用 。 


第 国 章 Javascript 基 础 


相关 的 代码 实例 请 参考 Chap8.28.html 文件 ， 然 后 双击 该 文件 ,在 正 浏览 器 中 运行 后 单 击 “获取 问候 ” 
按钮 ， 即 可 得 出 如 图 14-30 所 示 的 结果 。 


点 击 这 个 按钮 ， 获 得 基于 时 间 的 问候 。 


Good day 


图 14-30 if…else 语句 的 应 用 结果 


14.8.3 if.…else if…else 语句 
使 用 该 语句 来 选择 多 个 代码 块 之 一 来 执行 ， 具 体 语法 格式 如 下 : 


例如 : 如 果 时 间 小 于 10:00， 则 生成 问候 “早上 好 !”， 如 果 时 间 大 于 10:00 小 于 20:00， 则 生成 问候 “ 今 
天 好 !”， 否则 生成 问候 “晚上 好 !”。 
【 例 14-29】 实例 文件 ，ch14\Chap14.29.html》if…else if…else 语句 的 应 用 。 
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下 


相关 的 代码 实例 请 参考 Chap8.29.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-31 
所 示 。 


OO Bev 


在 让 语 名 中， 如果 所 涉及 的 判断 条 件 超出 两 种 ， 则 可 使 用 else 让 语句， 其 语法 格式 如 下 


这 种 格式 是 用 else 语句 进行 更 多 的 条 件 判断 ， 不 同 的 条 件 对 应 不 同 的 程序 语句 。 
【 例 14-30】〔 实 例文 件 ，ch14\Chap14.30.html》else-… 半 语句 的 应 用 。 
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<!DocTYPE html> 
<html> 

<head> 
<title>else...if</title> 
</head> 

<body> 

<p> 


这 个 实例 演示 了 else… 直 语句 的 应 用 。 


</p> 

<script language="Javascript"> 

| 

Var x=56; //x 的 值 为 56 

if (x<=1) //z 值 不 满足 此 条 件 ,不 会 执行 其 下 的 语句 
alert ("x<=1"); 

else if(x>lg&x<=50) /1x 值 不 满足 此 条 件 , 不 会 执行 其 下 的 语句 
alert ("x>l&&x<=50"); 

else if(x>505gx<=100) //x 值 足 此 条 件 ,将 执行 其 下 的 语句 
alert("x>50&&x<=100")7 // 输 出 结果 

else //x 值 不 满足 此 条 件 , 不 会 执行 其 下 语句 
alert ("x>100"); 

WE> 

</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap8.30.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-32 
所 示 。 


人 Wsers\gioangDec P ~ X O elseif 
文件 月 ”将 强 () 到 看 V) 收 训 (人) 工具 (T) 帮助 (H) 


这 个 示例 注 示 了 else… ifi 语 句 的 应 用 | 


图 14-32 ”else…if 语 句 的 应 用 结果 
从 运行 结果 中 可 以 看 出 ， 其 运行 过 程 如 下 : 首先 判断 x 是 否 小 于 或 等 于 1， 如 果 结 果 为 tue， 则 执行 语 
句 “alert("x<=1"):” 否则 程序 将 判断 x 是 否 大 于 1 并 且 小 于 或 等 于 50， 如 果 结果 为 tue， 则 执行 语句 
“alert("x>1&&x<=50")”;， 同 理 ， 如 果 上 述 语 句 均 不 满足 ， 则 执行 最 后 的 else 语句 。 


14.8.5 j 半 语句 的 赃 套 


让 (或 下 …else) 结构 可 以 嵌 套 使 用 ， 来 表示 所 示 条 件 的 一 种 层次 结构 关系 。 不 过 ， 在 使 用 让 语句 的 峰 
套 应 用 时 ， 最 好 使 用 大 括号 “{}” 来 确定 相互 的 层次 关系 。 
【 例 14-31】 实例 文件 ，ch14\Chap14.31.html) 让 语句 的 嵌 套 应 用 。 


<!DOCTYPE HTML> 
<html> 
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下 


相关 的 代码 实例 请 参考 Chap8.31.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-33 
所 示 。 
地 D x 


DC 


图 14-33 ”if 语句 的 赃 套 应 用 结果 


14.8.6 ”switch 语句 
switch 语句 用 于 基于 不 同 的 条 件 来 执行 不 同 的 动作 。 具 体 的 语法 格式 如 下 
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【 例 14-32】 (实例 文件 ，chl4\Chap14.32.html) switch 语句 的 应 用 。 


相关 的 代码 实例 请 参考 Chap8.32.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 后 单 击 “获取 星期 
信息 ”按钮 ， 即 可 在 下 方 显 示 星 期 数 如 图 14-34 所 示 。 
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14.9 ”循环 语句 


循环 语句 的 作用 是 反复 地 执行 同一 段 代码 ， 尽 管 其 分 为 几 种 不 同 的 类 型 , 但 基本 原理 几乎 都 是 一 样 的 ， 
只 要 给 定 的 条 件 仍 能 得 到 满足 ， 包 括 再 循环 条 件 语句 里 面 的 代码 就 会 重复 执行 下 去 ， 一 旦 条 件 不 再 满足 则 
终止 。 本 节 将 简要 介绍 JavaScript 中 常用 的 几 种 循环 。 


14.9.1 while 语句 


while 循环 会 在 指定 条 件 为 真 时 循环 执行 代码 块 ，while 语句 的 语法 格式 如 下 : 
while (条 件 ) 


需要 执行 的 代码 
| 


while 语句 为 不 确定 性 循环 语句 ， 当 表达 式 的 结果 为 真 (tue) 时 ， 执 行 循 环 中 的 语句 ， 表 达 式 的 结果 
为 假 (false) 时 ， 不 执行 循环 。 
【 例 14-33】〈 实 例文 件 ，chl4\Chap14.33.html) while 语句 的 应 用 。 


<!DocTYPE html> 
<html> 
<head> 
<title>while 语句 的 应 用 实例 </title> 
</head> 
<body> 
<p> 单 击 下 面 的 按钮 ,只 要 主 小 于 5 就 一 直 循环 代码 块 ,并 输出 数字 。</P> 
<button onclick="myFunction()"> 单 击 这 里 </button> 
<p id="demo"></p> 
<script> 
function myFunction(){ 

Var x="",i=0; 

while (i<5){ 

X=X + "该 数字 为 "+ 主 + "<br>"; 
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document .getElementById ("demo") .innerHTML=x; 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap8.33.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 后 单 击 “ 单 击 这 里 ” 
按钮 ， 即 可 显示 数字 信息 ， 如 图 14-35 所 示 。 


- 0 x 
闻 CAUsers\qiongu\Doc P ~ © | BwhicE mnt x 
文人 月 二 二 日“ 瑟 看 NM， 发 训 < 工具。 姑 凤 ) 


单 击 下 面 的 按钮 ， 只 要 i 于 5 就 一 直 循环 代码 块 ， 并 输出 数字 ~ 


图 14-35 ”while 语句 的 应 用 结果 


276 


第 国 章 JavaScript 基 础 


14.9.2 do…while 语句 


do…while 循环 是 while 循环 的 变 体 ， 该 循环 会 在 检查 条 件 是 否 为 真 之 前 执行 一 次 代码 块 ， 然 后 如 果 条 
件 为 真 ， 就 会 重复 这 个 循环 。do…while 语句 的 语法 格式 如 下 : 


do…while 为 不 确定 性 循环 ， 先 执行 大 括号 中 的 语句 ， 当 表达 式 的 结果 为 真 (tue) 时 ， 执 行 循环 中 的 
语句 ， 表 达 式 为 假 (false) 时 ， 不 执行 循环 ， 并 退出 do…while 循环 。 
【 例 14-34】〔 实 例文 件 ，ch14\Chap14.34.html) do…while 语句 的 应 用 。 


相关 的 代码 实例 请 参考 Chap8.34.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 后 单 击 “ 单 击 这 里 ” 
按钮 ， 即 可 显示 数字 信息 ， 如 图 14-36 所 示 。 


图 14-36 ”do…while 语句 的 应 用 结果 


a 
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提示 : while 与 do…while 的 区 别 : do…while 将 先 执行 一 遍 大 括号 中 的 语句 ， 再 判断 表达 式 的 真 假 ， 这 
是 它 与 while 的 本 质 区 别 。 


吕 14.9.3 for 语句 


for 语句 非常 灵活 ， 完 全 可 以 代替 while 与 do…while 语句 ， 如 图 14-37 所 示 为 for 语句 的 执行 流程 。 执 
行 的 过 程 为 : 先 执行 “初始 化 表达 式 ” 再 根据 “判断 表达 式 ” 的 结果 判断 是 否 执行 循环 ， 当 判断 表达 式 为 
真 tue 时 ， 执 行 循环 中 的 语句 ， 最 后 执行 “循环 表达 式 ” 并 继续 返回 循环 的 开始 ， 并 进行 新 一 轮 的 循环 ; 
表达 式 为 假 false 时 ， 不 执行 循环 ， 并 退出 for 循环 。 


初始 化 表达 式 


图 14-37 for 语句 的 执行 流程 
for 语句 语法 如 下 ; 
for (语句 1; 语 名 2; 语句 3) 


被 执行 的 代码 块 
} 
语句 1: (代码 块 ) 开始 前 执行 。 
语句 2: 定义 运行 循环 (代码 块 ) 的 条 件 。 
语句 3: 在 循环 (代码 块 ) 已 被 执行 之 后 执行 。 
例如 ; 计算 1~100 的 所 有 整数 之 和 (包括 1 与 100)。 
【 例 14-35】 实例 文件 ，ch14\Chap14.35.html》for 语句 的 应 用 。 
<!DOCTYPE html> 
<html> 
<head> 
<title>for 语句 的 应 用 实例 </title> 
</head> 
<body> 
<script> 
for (var i=0,isum=0;i<=100;i++) 
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isumt+=i; 
} 
document .write ("1-100 的 所 有 数 之 和 为 "+iSum) ; 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap8.35.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-38 
所 示 。 


- OO x 

知 cAUsers\qiangu\Doc ”CC 闫 for 生 和 句 的 应 用 示例 
文件 (。 妨 句 (E) 查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
1-100 的 所 有 数 之 和 为 5050 


14-38 ”for 语句 的 应 用 结果 


14.10 ” 跳 转 语句 


在 循环 语句 中 ， 某 些 情况 需要 跳出 循环 或 者 跳 过 循环 体内 剩余 语句 ， 而 直接 执行 下 一 次 循环 ， 此 时 可 
通过 break 和 continue 语句 来 实现 这 一 目的 。break 语句 的 作用 是 立即 跳出 循环 ，continue 语句 的 作用 是 停 
止 正在 进行 的 循环 而 直接 进入 下 一 次 循环 。 


14.10.1 break 语句 


break 语句 主要 有 以 下 3 种 作用 : 

(1) 在 switch 语句 中 ， 用 于 终止 case 语句 序列 ， 跳 出 switch 语句 。 

(2) 用 在 循环 结构 中 ， 用 于 终止 循环 语句 序列 ， 跳 出 循环 结构 。 

(3) 与 标签 语句 配合 使 用 ， 从 内 层 循环 或 内 层 程序 块 中 退出 。 

当 break 语句 用 于 for、while、do…while 循环 语句 中 时 ， 可 使 程序 终止 循环 而 执行 循环 后 面 的 语句 。 
【 例 14-36】 (实例 文件 ，chl4\Chap14.36.html) break 语句 的 应 用 。 

<!DOCTYPE html> 

<html> 

<head> 


<body> 
<title> break 语句 使 用 实例 </title> 
‘<script type = "text/javascript"> 
stop:{ 

for(var row = 1; row <= 10; ++row) 


{ 
for (var column = l;column <= 6;++column) 


| 
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B24 


下 


相关 的 代码 实例 请 参考 Chap8.36.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-39 
所 示 。 


图 14-39 break 语句 的 应 用 结果 


4.10.2 ”continue 语句 


continue 语句 只 能 出 现在 循环 语句 的 循环 体内 , 无 标号 的 continue 语句 的 作用 是 跳 过 当前 循环 的 剩余 语 
句 ， 继 续 执行 下 一 次 循环 。 

例如 要 显示 20 以 内 的 偶数 ， 首 先 判断 变量 x 是 奇数 时 ， 则 会 跳 过 本 循环 的 后 续 代 码 ， 直 接 执行 for 语 
名 中 的 第 三 部 分 ， 再 进行 下 一 次 循环 的 比较 ， 直 至 偶数 都 显示 出 来 。 

【 例 14-37】 (实例 文件 ，chl4\Chap14.37.html) continue 语句 的 应 用 。 
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相关 的 代码 实例 请 参考 Chap8.37.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-40 
所 示 。 


x=2 x=4 x=6 x=8 x=10 x=12 x=14 x=16 x=18 


图 14-40 continue 语句 的 应 用 结果 


14.11 九 九 乘法 表 


下 面 是 一 个 JavaScript 综合 实例 一 九 九 乘法 表 。 
【 例 14-38〗】 (〈 实 例文 件 ， chl4\Chap14.38.html) 九 九 乘法 表 的 应 用 。 
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相关 的 实例 请 参考 Chap14.38html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-41 所 示 。 


4X2=8 全 全 a 


5X2=10 
6Xx 2=12 
7x2=14 
8xX2=16 
9xX2=18 


TxX5=35 7X6=42 7XT=49 
8X5=40 8X6=48 8X7=56 8X8=64 
9X5=45 9X6=54 9XT=63 9X8=72 9X9=81 


图 14-41 九 九 乘法 表 的 应 用 结果 


14.12 ”计算 借贷 支出 金额 


下 面 是 一 个 JavaScript 综合 实例 一 一 计算 借贷 支出 金额 , 读者 可 以 先 自己 动手 编写 程序 , 经 过 出 错 、 调 


试 ， 反 复 检验 将 程序 进行 完善 。 


【 例 14-39】〔 实 例文 件 ，ch14\Chap14.39.html》 用 JavaScript 计算 借贷 支出 金额 。 
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function Found (zx){ 
return Math.round (x*100)/100; 
时 
</script> 
</html> 


相关 的 代码 实例 请 参考 Chap14.39.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 14-42 
所 示 。 


站 CNusersvqiangu\Doc ”CC 车 和 寺 算 企 代 支付 全 额 x 
文件 (站 ”六 坟 (E) 可 看 V) 收藏 (A) 工具 帮助 (H) 
输入 贷款 信息 : 
(D 贷款 总 额 
(2) 年 利率 (3)， 
(3) 借款 期 限 (年 )， 


计算 
输入 还 款 信息 ， 

(4) 每 月 还 款 金 额 ， 
(5) 还 款 总 金额 ， 
(6) 还 款 总 利息 ， 


图 14-42 ”运行 预览 效果 


在 输入 贷款 信息 下 方 输 入 贷款 金额 、 年 利率 与 借款 期 限 等 信息 ， 单 击 “ 计 算 ” 按 钮 ， 即 可 在 下 方 显示 
还 款 信息 ， 如 图 14-43 所 示 。 


- 0O x 
司 cAUsers\qiangu\Doc ”0 | 大 电动 计算 硬 贷 支付 全 额 x 

文件 (和 器 (E) 查看 V】 收藏 交 A) 工具 (部 助 (H) 

输入 贷款 信息 ， 

(DD 贷款 总 额 ， 100000 

(2) 年 利率 (Wy [6.5 

(3) 借款 期 限 (年 )，[10 

[Ea 

输入 还 款 信息 : 

(4) 每 月 还 款 金额 ， [1135. 怒 

(5) 还 款 总 金额 ， 

(6) 还 款 总 利息 ， 


图 14-43 ”计算 还 款 信息 


14.13 ”就 业 面试 技巧 与 解析 


14.13.1 面试 技巧 与 解析 (一) 
面试 官 : 有 些 程序 员 认为 JavaScript 是 Java 的 变种 ， 对 于 这 个 问题 ， 你 是 怎么 看 的 ? 
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应 聘 者 : 就 我 个 人 理解 来 说 ，JavaScript 不 是 Java 的 变种 。 虽 然 ，JavaScript 最 初 的 确 是 受 Java 启发 而 
开始 设计 的 ， 而 且 设计 的 目的 之 一 就 是 “看 上 去 像 Java”， 因 此 语法 上 有 很 多 类 似 之 处 ， 许 多 名 称 和 命名 规 
范 也 借 自 Java。 但 是 实际 上 ，JavaScript 的 主要 设计 原则 源 自 Self 和 Scheme， 它 与 Java 本 质 上 是 不 同 的 。 
它 与 Java 名 称 上 的 近似 ， 是 当时 开发 公司 为 了 营销 考虑 与 Sun 公司 达成 协议 的 结果 。 其 实 ， 从 本 质 上 讲 ， 
JavaScript 更 像 是 一 门 函数 式 编程 语言 ， 而 非 面向 对 象 的 语言 ， 它 使 用 一 些 智能 的 语法 和 语义 来 仿真 高 度 复 
杂 的 行为 。 其 对 象 模型 极为 灵活 、 开 放 和 强大 ， 具 有 全 部 的 反射 性 。 


14.13.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 你 认为 什么 是 脚本 语言 ? 

应 聘 者 : 就 我 个 人 理解 来 说 ， 脚 本 语言 是 由 传统 编程 语言 简化 而 来 的 语言 ， 它 与 传统 编程 语言 有 很 多 
相似 之 处 ， 也 有 不 同 之 处 。 脚 本 语言 的 最 显著 特点 : 一 是 它 不 需要 编译 成 二 进 制 ， 以 文本 的 形式 存在 ; 二 
是 脚本 语言 一 般 都 需要 其 他 语言 的 调用 执行 ， 不 能 独立 运行 。 
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”学 习 指引 


在 程序 开发 过 程 中 ， 总 是 需要 对 代码 程序 不 断 进 行 调试 以 及 优化 才能 达到 理想 的 效果 ，JavaScript 也 同 
样 需要 一 套 有 力 的 开发 工具 。 本 章 将 详细 介绍 与 JavaScript 相关 的 工具 的 应 用 ， 主 要 内 容 包括 JavaScript 常 
用 的 编写 工具 、 开 发 工具 与 调试 工具 。 


< 全 ”重点 导读 
。 掌 握 JavaScript 编写 工具 的 使 用 。 


。 掌 握 JavaScript 开发 工具 的 使 用 。 
。 掌 握 JavaScript 调试 工具 的 使 用 。 


15.1 JavaScript 的 编写 工具 


JavaScript 是 一 种 脚本 语言 ， 代 码 不 需要 编译 成 二 进 制 ， 而 是 以 文本 的 形式 存在 ， 因 此 任何 文本 编辑 器 
都 可 以 作为 其 开发 环境 。 通 常 使 用 的 JavaScript 编辑 器 有 记事 本 、Ultra Edit-32 和 Dreamweaver。 


15.1.1 系统 自 带 编辑 器 记事 本 


记事 本 是 Windows 系统 自 带 的 文本 编辑 器 ， 也 是 最 简洁 方便 的 文本 编辑 器 ， 由 于 记事 本 的 功能 过 于 单 
一 ， 所 以 要 求 开 发 者 必须 熟练 掌握 JavaScript 语言 的 语法 、 对 象 、 方 法 和 属性 等 。 对 于 初学 者 是 个 极 大 的 挑 
战 ， 因 此 , 不 建议 使 用 记事 本 。 但 是 由 于 记事 本 简单 方便 、 打 开 速 度 快 ， 所 以 常用 来 做 局 部 修改 , 如 图 15-1 
所 示 。 
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IO) 二 V) 大 内 


图 15-1 记事 本 编辑 窗口 


15.1.2 UltraEdit 文本 编辑 器 


UltraEdit 是 能 够 满足 一 切 编辑 需要 的 编辑 器 。 它 是 一 套 功能 强大 的 文本 编辑 器 ， 可 以 编辑 文本 、 十 六 
进 制 、ASCII 码 ， 可 以 取代 记事 本 ， 可 同时 编辑 多 个 文件 ， 而 且 即 使 开启 很 大 的 文件 速度 也 不 会 慢 。 软 件 
附 有 HTML 标签 颜色 显示 、 搜 寻 替 换 以 及 无 限制 的 还 原 功能 ， 一 般 大 家 喜欢 用 其 来 代替 记事 本 的 文本 编辑 
器 ， 如 图 15-2 所 示 。 


图 门店 日 中 -unea ceo 日 


+ ex 


图 15-2 UltraEdit 文 本 编辑 器 窗口 


15.1.3 Dreamweaver 开发 工具 


Es 
Adobe 公司 的 Dreamweaver 用 户 界面 非常 友好 ， 是 一 个 非常 优秀 的 网 页 开发 工具 ， 深 受 广大 用 户 的 喜 
爱 ，Dreamweaver 的 主 界面 如 图 15-3 所 示 。 
提示 : 除了 上 述 编辑 器 外 ， 还 有 很 多 种 编辑 器 可 以 用 来 编写 JavaScript 程序 。 如 Aptana、1st Javascript 
Editor、Javascript Menu Master、Platypus Javascript Editor、SurfMap Javascript、Javascript Editor 等 .“ 工 欲 
善 其 事 ， 必 先 利 其 器 ”， 选 择 一 款 适合 自己 的 JavaScript 编辑 器 ， 可 以 让 程序 员 的 编辑 工程 事半功倍 。 
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15-3 Dreamweaver 编辑 窗口 


15.2 ” JavaScript 常用 的 开发 工具 


由 于 JavaScript 缺少 合适 的 开发 工具 的 支持 , 编写 JavaScript 程序 , 特别 是 超过 500 行 以 上 的 JavaScript 
程序 ， 就 会 变 得 非常 复杂 ， 在 代码 中 不 小 心 增 加 了 一 个 多 余 的 “(” 或 “{”， 整 段 代 码 就 有 可 能 崩溃 。 本 节 
就 来 介绍 几 款 常 用 的 JavaScript 开发 工具 。 


15.2.1 ”附带 测试 的 开发 工具 一 一 TestSwarm 


TestSwarm 是 Mozilla 实验 室 推出 的 一 个 开源 项 目 , 它 旨 在 为 开发 者 提供 在 多 个 浏览 器 版 本 上 快速 轻松 
测试 自己 JavaScript 代码 的 方法 。 

目前 ,TestSwarm 正在 测试 许多 开发 人 员 都 依靠 的 诸多 流行 的 开源 JavaScript 库 , 其 中 包括 jQuery、YUI、 
Dojo、MooTools 和 Prototype 等 。 如 果 用 户 想 在 自己 的 项 目 中 使 用 TestSwarm， 可 以 下 载 并 在 自己 的 服务 器 
上 安装 TestSwarm，TestSwarm 的 工作 界面 如 图 15-4 所 示 。 


xXP Windows Vista Windows 


@gg ggY YY 
ooo 
EEE EE 


[ew rt wors | 
15-4 TestSwarm 的 工作 界面 
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15.2.2 ”半自动 化 开发 工具 一 一 Minimee 


在 互联 网 领域 ， 速 度 就 是 一 切 。 这 意味 着 当面 对 CSS 和 JavaScript 文件 的 时 候 ， 文 件 大 小 是 一 个 重要 
的 要 素 。Minimee 可 以 自动 将 文件 最 小 化 以 及 对 文件 进行 组 合 ， 帮 助 用 户 化 繁 为 简 ，Minimee 的 工作 界面 
如 图 15-5 所 示 。 


Compatible with server-si 
caching 


图 15-5 ”Minimee 的 工作 界面 


15.2.3 ”轻松 建立 JS 库 的 开发 工具 一 一 Boilerplate 


JavaScript Boilerplate 是 基于 HTML/CSS/JavaScript 的 一 个 快速 、 健 壮 和 面向 未 来 的 网 站 模板 。 经 过 多 
年 的 迭代 开发 ， 功 能 更 加 完善 。 包 括 跨 浏览 器 的 正常 化 显示 、 性 能 优化 、AJAX 跨 域 通信 和 Flash 处 理 等 。 
这 个 模板 包含 一 个 .htaccess 配置 文件 ， 通 过 该 配置 文件 可 以 设置 Apache 缓存 、 网 站 播放 HTML 5 视频 、 使 
用 @font-face 和 是 否 允 许 使 用 gzip 等 ，Boilerplatee 的 工作 界面 如 图 15-6 所 示 。 


Query Selector Characters Count 


图 15-6 Boilerplate 的 工作 界面 


它 同 样 可 以 在 手机 浏览 器 工作 ， 它 拥有 iOS、Android、Opera 所 支持 的 标签 和 CSS 骨架 。Boilerplate 
有 以 下 特性 : 

支持 HIML 5。 

跨 浏 览 器 兼容 .包括 对 IE 6 的 支持 。 

高 速 缓存 和 压缩 规则 ， 最 佳 实践 配置 。 

移动 浏览 器 优化 。 

单元 测试 套件 JavaScript 分 析 。 

移动 与 特定 CSS 规则 的 iOS 和 Android 的 浏览 器 支持 。 
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15.3 JavaScript 常用 的 调试 工具 


JavaScript 技术 已 经 变 得 非常 流行 ， 每 一 天 都 有 新 的 变化 。JavaScript 加 强 了 很 多 东西 ， 为 了 调试 
JavaScript 代码 会 涉及 各 种 各 样 的 工作 。 

JavaScript 调试 器 能 帮忙 找 出 JavaScript 代码 中 的 错误 。 要 想 成 为 一 名 高 级 JavaScript 调试 员 ， 你 需要 
知道 自己 要 用 到 的 一 些 调试 器 、 典 型 的 JavaScript 调试 工作 流程 及 高 效 调试 的 核心 条 件 。 

当 调 查 一 个 特定 问题 时 ， 通 常 遵循 以 下 过 程 ; 

(1) 在 调试 器 的 代码 查看 窗口 找 出 相关 代码 。 

(2) 在 觉得 将 发 生 有 趣 的 事 的 地 方 设置 断 点 。 

(3) 若是 行内 脚本 ， 则 在 浏览 器 中 重 载 页 面 ， 若 是 一 个 事件 处 理 器 则 点 击 按钮 ， 以 再 次 运行 脚本 。 

(4) 一 直 等 到 调试 器 暂停 执行 并 通过 代码 。 

(5) 查看 变量 值 。 例 如 ， 看 看 那些 本 该 包含 一 个 值 却 显示 未 定义 的 变量 ， 或 者 当 你 希望 他 们 返回 true 
却 返 回 false 时 。 

(6) 如 果 需 要 ， 使 用 命令 行 对 代码 进行 求 值 ， 或 者 为 测试 改变 变量 。 

(7) 通过 学 习 导致 错误 情况 发 生 的 那 段 代码 或 输入 ， 找 出 问题 所 在 。 

这 里 介绍 5 个 最 常用 的 JavaScript 调试 工具 。 


15.3.1 调试 工具 一 一 Drosera 


Drosera 可 以 调试 任何 基于 WebKit 的 应 用 程序 ，Drosera 的 调试 界面 如 图 15-7 所 示 。 
eee Debugger 


CA 


# Function | | variable 
create_click 


dcook_val 
set_ult_value 
ygUltClientHandleEvent 
Global 


AwuN-o 


了 | http://usjs2.yimg.com/us.yimg.com/i/w) 
c_pp_done-0; 
‘128 } 


function create_clickO{ 


return yahoo_encode64Cfh》; 


图 15-7 Drosera 的 调试 界面 
15.3.2 ”规则 的 调试 工具 一 一 Dragonfly 
[Db 


Dragonfly 可 以 高 亮 显示 语法 和 断 点 ， 搜 索 功能 强大 ， 可 以 搜索 当前 选择 的 脚本 。 可 以 用 文本 、 正 则 表 
达 式 来 加 载 所 有 的 JavaScript 文件 ，Dragonfly 的 调试 界面 如 图 15-8 所 示 。 
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Smarte 关 二 一 
(ee a 


15-8 Dragonfly 的 调试 界面 


15.3.3 ”Firefox 的 集成 工具 一 一 Firebug 


Firefox 集成 了 Firebug， 它 提供 了 一 个 丰富 的 Web 开发 工具 ， 可 以 在 任何 网 页 编辑 、 调 试 和 监控 CSS、 
HTML 与 JavaScript，Firebug 的 调试 界面 如 图 15-9 所 示 。 


els 四 | eee- ne os sem Bl) Bee 
| 品 Clear persist CK 
| 


图 15-9 ”Firebug 的 调试 界面 


15.3.4 前端 调试 利器 一 Debugbar 


回 
在 IE 8 之 前 ， 在 正中 的 调试 就 只 有 alert 命令 ， 虽 然 可 以 在 Visual Studio 中 进行 调试 ， 但 过 程 比较 麻 
烦 。 一 个 做 得 比较 好 的 工具 就 是 Debugbar， 不 过 该 工具 与 Firebug 比 起 来 ， 还 是 有 很 大 的 差距 的 。 
Debugbar 虽然 可 以 与 Firebug 一 样 获取 页 面 元 素 、 做 源 代 码 调试 和 CSS 调试 , 但 是 ， 其 功能 实在 有 限 ， 
Debugbar 的 工作 界面 如 图 15-10 所 示 。 
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| i Ee 
ee EEC 
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BO termet | Mode prottge: deoctive 起 100%% 一 


图 15-10 ”Debugbar 的 工作 界面 
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蝇 15.3.5 ”支持 浏览 器 多 的 工具 一 一 Venkman 


Venkman 是 Mozilla 的 JavaScript degugger 代码 名 称 , 可 以 在 用 户 界 面 上 和 控制 台 命 令 中 使 用 断 点 管理 、 
调用 栈 检查 、 检 查 变量 /对 象 等 功能 ， 可 以 让 用 户 以 最 习惯 的 方式 调试 。 
Venkman 可 以 从 http://www.hacksrus.com/ 一 ginda/venkman/ 下 载 ， 然 后 用 firefox 打开 得 到 的 xpi 文件 ， 
它 就 会 自动 安装 ， 重 启 firefox， 选 择 工具 ->JavaScript Debugger 启动 venkman， 工 作 界面 如 图 15-11 所 示 。 


Gis 


et Be Be prine ds 
ao 了 人 rm 时 rm 


= Ee 1*| " Ee x 


re mr on rv Teh 


15-11 Venkman 的 工具 界面 


从 工作 界面 中 , 可 以 看 出 其 窗口 布局 很 清晰 ，Loaded Scripts 窗口 中 显示 当前 可 用 的 JavaScript， 点 击 文 
件 旁 边 的 加 号 ， 就 会 打开 一 个 详细 列表 ， 列 出 该 文件 中 的 所 有 函数 。 

代码 中 的 断 点 跟踪 ， 是 调试 工作 中 的 重点 ，venkman 支持 两 种 断 点 模式 ， 分 别 是 硬 (hard) 断 点 和 将 来 
(future) 断 点 。 两 者 的 区 别 是 : 将 来 断 点 设置 在 函数 体 之 外 的 代码 行 上 ， 一 旦 这 些 代码 行 加 载 到 浏览 器 上 
就 会 立即 执行 。 

下 面 给 出 一 个 实例 ， 一 个 js 文件 DebugSamplejs 和 一 个 调用 页 面 CallPage.html。 


//Debugsample.js 
var datestring = new Date() .tostring(); 
function doFoo(){ 

时 


var y = "hello"; 
alert ("test"); 
} 


//callPage.html 
<html> 
<title>test page</title> 
<script language="JavaSscript" src="Debugsample.js"></script> 
<body> 
<form id="test"> 
<input type="button" value="test" onclick="doFo0()"/> 
</form> 
</body> 
</html> 
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用 firefox 打开 CallPage.html， 启 动 venkman， 在 所 需 的 代码 行 上 设置 一 个 断 点 ， 点 击 代码 行 左 侧 的 边 
栏 即 可 。 每 次 点 击 这 一 行 时 ， 这 行 就 会 轮流 切换 为 以 下 3 种 : 无 断 点 、 硬 断 点 、 将 来 断 点 。 硬 断 点 由 一 个 
红色 的 B 指示 ,将 来 断 点 有 橙色 的 指示。 函数 体外 的 代码 行 只 能 切换 为 无 断 点 和 将 来 断 点 。 可 以 在 var 
y= "hello": 这 一 行 设 个 断 点 ， 如 图 15-12 所 示 。 


1 var dateStrins = new Date(). toString0 
2 function doFoo() { 

var r=2+2; 

ar y = “hello”; 

alert(“test”); 


EE 


图 15-12 设置 断 点 


单 击 页 面 的 test 按 钮 ,可 以 看 到 在 断 点 处 停止 了 , 接 下 来 的 操作 想必 大 家 都 知道 了 , 它 和 其 他 的 debugger 
用 法 相同 。 

下 面 看 一 下 venkman 的 另 一 个 强大 特性 ， 右 键 点 击 一 个 断 点 ， 选 择 Breakpoint Properties( 断 点 属性 )， 
如 图 15-13 所 示 。 


图 15-13 右 击 快捷 菜单 


这 样 会 打开 Breakpoint Properties 对 话 杠 ， 人 允许 用 户 修改 断 点 的 行为 ， 如 图 15-14 所 示 。 


图 15-14 Breakpoint Properties 对 话 框 


这 个 窗口 的 强大 之 处 在 于 Wen triggered, execute… (如 果 触 发 ， 则 执行 …)， 勾 选 这 个 复 选 框 ， 会 置 一 
个 文本 框 有 效 ,可 以 编写 js 代码 ,每 次 遇 到 断 点 时 都 会 执行 此 代码 , 向 这 个 定制 脚本 传递 的 参数 名 为 _count_， 
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它 表示 遇 到 断 点 的 次 数 ， 对 话 框 的 4 个 复 选 框 中 ，Stop fresult is true 的 功能 最 强大 ， 它 意味 着 只 有 当 定 制 
代码 的 返回 值 为 tue 时 ， 断 点 才 会 暂停 执行 。 


15.4 “就业 面试 技巧 与 解析 


15.4.1 ”面试 技巧 与 解析 (一) 


面试 官 : 如 果 当 前 浏览 器 不 支持 JavaScript， 如 何 做 才能 不 影响 网 页 的 美观 ? 

应 聘 者 : 现在 浏览 器 种 类 、 版 本 繁多 ， 不 同 浏览 器 对 JavaScript 代码 的 支持 度 均 不 一 样 。 为 了 不 影响 网 
页 的 美观 ， 可 以 使 用 HTML 注释 语句 将 代码 注释 ， 这 样 便 不 会 在 网 页 中 输出 这 些 代 码 。HITML 注释 语句 使 
用 “<! 一 ”符号 和 “一 >” 标 记 JavaScript 代码 。 


15.4.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 使 用 JavaScript 编写 好 应 用 程序 后 ， 你 认为 还 需要 对 JavaScript 代码 进行 优化 处 理 吗 ? 

应 聘 者 : 对 于 我 个 人 来 说 ， 优 化 处 理 是 必要 的 ， 而 且 主要 优化 的 是 脚本 程序 代码 的 下 载 时 间 和 执行 效 
率 , 因为 JavaScript 运行 前 不 需要 进行 编译 而 直接 在 客户 端 运 行 , 所 以 代码 的 下 载 时 间 和 执行 效率 直接 决定 
了 网 页 的 打开 速度 ， 从 而 影响 着 客户 端的 用 户 体验 效果 。 

具体 来 讲 ， 可 以 从 下 面 三 个 方面 来 优化 JavaScript 代码 。 

(1) 合理 地 声明 变量 。 在 JavaScript 中 ， 变 量 的 声明 方式 可 分 为 显 式 声明 和 隐 式 声明 ， 使 用 var 关键 字 
进行 声明 的 就 是 显 式 声明 ， 而 没有 使 用 var 关键 字 的 就 是 隐 式 声明 。 在 函数 中 显 式 声明 的 变量 为 局 部 变量 ， 
隐 式 声明 的 变量 为 全 局 变量 。 

(2) 简化 代码 。 简 化 JavaScript 代码 是 优化 代码 的 一 个 非 要 重要 的 方法 。 将 工程 上 传 到 服务 器 前 ， 尽 量 
缩短 代码 的 长 度 ， 去 除 不 必要 的 字符 ， 包 括 注 释 、 不 必要 的 空格 、 换 行 等 。 

(3) 多 使 用 内 置 的 函数 库 。 与 C、java 等 语言 一 样 ，JavaScript 也 有 自己 的 函数 库 ， 函 数 库 里 有 很 多 内 
置 函数 ， 用 户 可 以 直接 调用 这 些 函 数 。 当 然 , 开发 人 员 也 可 以 自己 去 写 那些 函数 , 但 是 JavaScript 中 的 内 置 
函数 的 属性 方法 都 是 经 过 C、C++ 之 类 的 语言 编译 的 ， 而 开发 者 自己 编写 的 函数 在 运行 前 还 要 进行 编译 ， 
所 以 在 运行 速度 上 JavaScript 的 内 置 函数 要 比 自己 编写 的 函数 快 很 多 。 
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JavaScript 对 象 与 数组 


辣 ” 学 习 指 引 


对 象 是 JavaScript 最 基本 的 数据 类 型 之 一 ， 是 一 种 复合 的 数据 类 型 ; 数组 是 JavaScript 中 唯一 用 来 存储 
和 操作 有 序数 据 集 的 数据 结构 。 本 章 将 详细 介绍 JavaScript 的 对 象 与 数组 ， 主 要 内 容 包 括 创建 对 象 的 方法 、 
常用 内 置 对 象 、 对 象 的 访问 语句 、 对 象 的 序列 化 、 创 建 对 象 的 常用 模式 、 数 组 对 象 以 及 数组 的 应 用 方法 等 。 


E 重点 导读 


“掌握 创建 对 象 的 方法 。 

“掌握 常用 内 置 对 象 的 使 用 方法 。 
。 掌 握 对 象 访问 语句 的 使 用 方法 。 
“掌握 对 象 的 序列 化 应 用 。 

“掌握 创建 对 象 常用 模式 的 方法 。 
* 掌握 数组 对 象 的 使 用 方法 。 

。 掌 握 使 用 数组 的 方法 与 技巧 。 


16.1 创建 对 象 的 方法 


JavaScript 对 象 是 拥有 属性 和 方法 的 数据 。 例 如 ， 在 真实 生活 中 ， 一 辆 汽车 是 一 个 对 象 。 对 象 具有 自己 
的 属性 ， 如 重量 、 颜 色 等 ， 方 法 有 启动 、 停 止 等 。 

JavaScript 中 创建 对 象 有 以 下 几 种 方法 : 

使 用 内 置 对 象 创建 。 

直接 定义 并 创建 。 

自 定义 对 象 构造 创建 。 
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济 16.1.1 使 用 内 置 对 象 创 建 对 象 


JavaScript 可 用 的 内 置 对 象 可 分 为 两 种 ， 一 种 是 语言 级 对 象 ， 如 String、Object、Function 等 ， 另 一 种 是 


环境 宿主 级 对 象 ， 如 window、document、body 等 。 通 常 ， 我 们 所 说 的 使 用 内 置 对 象 ， 是 指 通过 语言 级 对 象 
的 构造 方法 ， 创 建 出 一 个 新 的 对 象 ， 具 体 代码 格式 如 下 ; 


var str = new String(" 初 始 化 String")7 

var strl = "直接 赋值 的 String"; 

var func = new Function("x","alert (x)"); 7/ 初始 化 func 

var o = new Object()7 // 初 始 化 一 个 Object 对 象 


下 面 创建 一 个 人 对 象 ， 对 象 的 属性 包括 姓名 、 年 龄 等 。 
【 例 16-1】 (实例 文件 ，chl6\Chap16.1.html) 创建 JavaScript 对 象 应 用 实例 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 创 建 JavaScript 对 象 </title> 
</head> 

<body> 

<p> 创 建 Javascript 对 象 </p> 

<p id="demo"></p> 


<script> 
var person = { 1/ 创建 对 象 
// 给 对 象 添加 属性 


firstName : " 刘 ", 
lastName : "天 佑 "， 
age 
eyecolor : "black" 
Ei; 
document .getElementById ("demo") .innerHTML = 
person.firstName +person.lastName+ "现在 "tperson.age +" 岁 了 ."; 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap16.1.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-1 


所 示 。 
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pa 口 x 
间 CWeersiqianguiPee 亡 ~ C | 大生 oveccrip 攻 
文 # 人 四 妃 殷 E) 过 看 MV) 。 收 训 六 (A) 工具 (7) 帮 动 [H) 


创建 JavaScripr 对 象 
刘 天 佑 现在 3 岁 了 。 


图 16-1 使 用 内 置 对 象 创建 对 象 


1.2 直接 定义 并 创建 对 象 
直接 定义 并 创建 对 象 ， 易 于 阅读 和 编写 ， 同 时 也 易于 解析 和 生成 。 直 接 定义 并 创建 采用 “ 键 / 值 对 ” 集 
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合 的 形式 。 在 这 种 形式 下 ， 一 个 对 象 以 “{”( 左 大 括号 ) 开始 ,“}”( 右 大 括号 ) 结束 。 每 个 “名 称 ” 后 跟 
一 个 “:”( 冒 号 ),““ 键 / 值 对 ”之 间 使 用 “,”( 有 逗号 ) 分 隔 。 具 体 代码 如 下 : 
person={firstname:" 刘 ", lastname:" 天 佑 ", age:3,eyecolor:"black"} 


直接 定义 并 创建 对 象 具有 以 下 特点 : 

简单 格式 化 的 数据 交换 。 

易于 人 们 的 读 写 习惯 。 

易于 机 器 的 分 析 和 运行 。 

下 面 创建 一 个 人 对 象 ， 对 象 的 属性 包括 姓名 、 年 龄 等 。 

【 例 16-2】〔 实 例文 件 ，ch16\Chap16.2.html) 创建 JavaScript 对 象 应 用 实例 。 


<!DOCTYPE html> 
<html> 

<head> 

<title> 创 建 JavaScript 对 象 </title> 

</head> 

<body> 

<script> 

person={firstname:" 刘 ", lastname:" 天 售 ",age:3,eyecolor:"black"} 

document .write (person.firstname + person.lastname+" 现 在 " + person.age + " 岁 了 "); 


</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap16.2.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-2 
所 示 。 


- 0O x 
轩 csersqiengupoc PD - ©| Bsavascipts x 

文体 站” 志 季 日、 豆 看 V) 收 志 天 入 工具 20(H) 

刘 天 他 现在 3 岁 了 


16-2 直接 定义 并 创建 对 象 


16.1.3” 自 定义 对 象 构造 创建 


创建 高 级 对 象 构 造 有 两 种 方式 ， 一 种 是 使 用 “this” 关 键 字 构造 ， 另 一 种 是 使 用 原型 prototype 构造 。 
具体 代码 如 下 : 
// 使 用 this 关键 字 


function person () 

{ 
this.name = " 刘 天 做"; 
this.age = 3; 

} 

// 使 用 prototype 

function person (){} 

person.prototype.name = " 刘 天 佑 "7 


person.prototype.age = 3; 
alert (new person () .name); 
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上 例 中 的 两 种 定义 在 本 质 上 没有 区 别 ， 都 是 定义 person 对 象 的 属性 信息 。this 与 prototype 的 区 别 主要 
在 于 属性 访问 的 顺序 。 具 体 代码 如 下 : 


this 与 prototype 定义 的 另 一 个 不 同 点 是 属性 的 占用 空间 不 同 。 使 用 this 关键 字 ， 实 例 初 始 化 时 为 每 个 
实例 开辟 构造 方法 所 包含 的 所 有 属性 、 方 法 所 需 的 空间 ， 而 使 用 prototype 定义 ， 由 于 prototype 实际 上 是 指 
向 父 级 的 一 种 引用 ， 仅 仅 是 个 数据 的 副本 ， 因 此 在 初始 化 及 存储 上 都 比 this 节约 资源 。 

下 面 创建 一 个 人 对 象 ， 对 象 的 属性 包括 姓名 、 年 龄 等 。 

【 例 16-3】 (实例 文件 ，chl6\Chap16.3.html) 创建 JavaScript 对 象 应 用 实例 。 


相关 的 代码 实例 请 参考 Chap16.3.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-3 
所 示 。 


辐 朵 cueeaaouaecp rc] 
刘 天 佑 现在 3 网 了 ! 


图 16-3 自 定 义 对 象 构造 创建 


298 


第 和 章 JavaScript 对 象 与 数组 


16.2 常用 内 置 对 象 


JavaScript 作为 一 门 基于 对 象 的 编程 语言 ， 以 其 简单 、 快 捷 的 对 象 操作 获得 Web 应 用 程序 开发 者 的 认 
可 ， 而 其 内 置 的 几 个 核心 对 象 ， 则 构成 了 JavaScript 脚本 语言 的 基础 。 


16.2.1 字符 串 对 象 


字符 串 〈String) 对 象 是 JavaScript 的 内 置 对 象 ， 属 于 动态 对 象 ， 需 要 创建 对 象 实例 后 才能 引用 该 对 象 
的 属性 和 方法 ， 该 对 象 主 要 用 于 处 理 或 格式 化 文本 字符 串 及 确定 和 定位 字符 串 中 的 子 字符 串 。 
1. 创建 String 对 象 
String 对 象 用 于 处 理 文本 或 字符 串 。 创 建 String 对 象 的 方法 有 两 种 。 
第 一 种 是 直接 创建 ， 例 如 : 
var txt = "string"; 
其 中 ，var 是 可 选项 ,“"string"” 就 是 给 对 象 txt 赋 的 值 。 
第 二 种 是 使 用 new 关键 字 来 创建 ， 例 如 : 
Var txt = new String("string"); 
其 中 ，var 是 可 选项 ， 字 符 串 构造 函数 String0 的 第 一 个 字母 必须 为 大 写字 母 。 
注意 : 上 述 两 种 语句 效果 是 一 样 的 ， 因 此 声明 字符 囊 时 可 以 采用 new 关键 字 ， 也 可 以 不 采用 new 关键 字 。 
2. String 对 象 属性 
String (字符 串 ) 对 象 的 属性 及 说 明 如 表 16-1 所 示 。 


表 16-1 字符 串 对 象 的 属性 及 说 明 


属 性 描 述 
constmctor 对 创建 该 对 象 的 函数 的 引用 
length 字符 串 的 长 度 
prototype 人 允许 用 户 向 对 象 添 加 属性 和 方法 


【 例 16-4】 实例 文件 ，ch16\Chap16.4.html) 计算 字符 串 的 长 度 。 


<!DOCTYPE html> 
<html> 

<head> 

<title> 计 算 字 符 囊 的 长 度 </title> 

</head> 

<body> 

<script> 

var txt = "Hello Javascript!"; 
document .write ("字符 串 "Hello JavaScript! "的 长 度 为 : "+txt.length); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.4.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-4 
所 示 。 
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- OO x 
司 CAUsers\qiangu\Doc DC | 感 计算 字 行 二 的 长 度 

文件 昌 。 篇 总 日 。 查看 (V)。 收 生 闪 (A) 工具 (T) 帮 动 (H) 

字符 串 “Hello JavaScript! ”的 长 度 为 ， 17 


16-4 计算 字符 串 的 长 度 


注意 : 测试 字符 串 长 度 时 ， 空 格 也 占 一 个 字符 位 。 一 个 汉字 点 一 个 字符 位 ， 即 一 个 汉字 长 度 为 1。 


3. String 对 象 的 方法 


String (字符 串 ) 对 象 的 方法 如 表 16-2 所 示 。 使 用 这 些 方法 可 以 定义 字符 串 的 属性 ， 如 以 大 号 字体 显 
示 字 符 串 、 指 定 字符 串 的 显示 颜色 等 。 


表 16-2 String 对 象 的 方法 


六 汪汪 法 描 述 
charAt() 返回 在 指定 位 置 的 字符 
charCodeAt0 返回 在 指定 的 位 置 的 字符 的 Unicode 编码 
concat0 连接 字符 串 
fromCharCode0 从 字符 编码 创建 一 个 字符 串 
indexof0 检索 字符 串 
lastmndexofD) 从 后 向 前 搜索 字符 串 
matchO) 找到 一 个 或 多 个 正则 表达 式 的 匹配 
replace0 替换 与 正则 表达 式 匹配 的 子 串 
searchO 检索 与 正则 表达 式 相 匹配 的 值 
sliceO) 提取 字符 串 的 片断 ， 并 在 新 的 字符 串 中 返回 被 提取 的 部 分 
splitO 把 字符 串 分 割 为 字符 串 数组 
substr0 从 起 始 索引 号 提取 字符 串 中 指定 数目 的 字符 
substringO) 提取 字符 串 中 两 个 指定 的 索引 号 之 间 的 字符 
toLowerCase0 把 字符 串 转换 为 小 写 
toUpperCase0 把 字符 串 转换 为 大 写 
valueof0 返回 某 个 字符 串 对 象 的 原始 值 


【 例 16-5】 实例 文件 : 


<!DOCTYPE html> 
<html> 
<head> 


ch16\Chap16.5.html) 转换 字符 串 的 大 小 写 。 


<title> 转 换 字符 串 的 大 小 写 </title> 


</head> 
<body> 


300 


第 辐 章 JavaScript 对 象 与 数组 


<p> 该 方法 返回 一 个 新 的 字符 串 , 源 字符 串 没有 被 改变 。</p> 

<script> 

var txt="Hello World!"; 

document .write ("<p>” +" 原 字符 率 : "+ txt + "</p>"); 

document .write ("<p>" +" 全 部 大 写 : " + txt.toUpperCase() + "</p>"); 
document .write ("<p>"” + "全 部 小 写 : " +txt.toLowercase() + "</p>"); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.5.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-5 
所 示 。 


= x 
司 cuserwqiangwpoc 站 "0 | 司 33 和 90 大 4 瑟 9 
文 作物 吕 日 ， 豆 中 M 履 生 夫 A)。 I 上 MT) NH) 
该 方法 返回 一 个 新 的 字 特 早 ， 产 宁 符 华 设 有 被 改变 。 
原 字 符 率 ，Hello Worlal 
全 部 大 写 : HELLO WoRLD! 


全 部 小 号: hello world! 


16-5 ”转换 字符 串 的 大 小 写 


16.2.2 日 期 对 象 


Date (日 期 ) 对 象 用 于 处 理 日 期 与 时 间 ， 是 一 种 内 置式 JavaScript 对 象 。 


1. 创建 Date 对 象 
创建 Date 对 象 的 方法 有 以 下 四 种 : 


var d = new Date(); // 当 前 日 期 和 时 间 

var d = new Date (milliseconds); // 返 回 从 1970 年 1 月 1 日 至 今 的 毫秒 数 

var d = new Date (datestring); 

var d = new Date (year, month, day, hours, minutes, seconds, milliseconds); 


上 述 创建 方法 中 的 参数 大 多 数 都 是 可 选 的 ， 在 不 指定 的 情况 下， 默认 参 数 是 0。 
实例 化 一 个 日 期 ， 代 码 如 下 : 


var today = new Date() 


var dl = new Date ("October 13, 1975 11:13:00") 
var d2 = new Date(79,5,24) 
var d3 = new Date(79,5,24,11,33,0) 


下 面 给 出 一 个 实例 ， 分 别 使 用 上 述 四 种 方法 创建 日 期 对 象 。 
【 例 16-6】〔 实 例文 件 ，ch16\Chap16.6.html) 创建 日 期 对 象 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 创 建 日 期 对 象 </title> 

<script> 

// 以 当前 时 间 创建 一 个 日 期 对 象 

var myDatel=new Date(); 

// 将 字符 串 转 换 成 日 期 对 象 ,该 对 象 代表 日 期 为 2017 年 5 月 10 日 


var myDate2=new Date("dJune 10,2017"); 
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// 将 字符 串 转换 成 日 期 对 象 , 该 对 象 代表 日 期 为 2017 年 6 月 10 日 


Var myDate3=new Date("2017/6/10"); 


// 创 建 一 个 日 期 对 象 ,该 对 象 代表 日 期 和 时 间 为 2017 年 10 月 19 日 16 时 16 分 16 秒 


Var myDate4=new Date(2017,10,19,16,16,16); 


// 创 建 一 个 日 期 对 象 ,该 对 和 象 代表 距离 1970 年 1 月 1 日 0 分 0 秒 20000 毫秒 的 时 间 


Var myDate5=new Date(20000); 


// 分 别 输出 以 上 日 期 对 象 的 本 地 格式 


document .write ("myDatel 所 代表 的 时 间 为 : "+myDatel.toLocalestring()+"<br>"); 


document .write ("myDate2 所 代表 的 时 间 为 : 
document .write ("myDate3 所 代表 的 时 间 
document .write ("myDate4 所 代表 的 时 间 


+myDate2.toLocalestring ()+"<br>"); 
+myDate3.toLocalestring ()+"<br>"); 
+myDate4.toLocalestring ()+"<br>"); 


document .write ("myDate5 所 代表 的 时 间 为 : "+myDate5.toLocalestring()+"<br>"); 


</script> 
</head> 
<body> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap16.6.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-6 
所 示 。 


国 CNUsers\qiangu\Doc P ~ 0 | © EE 


文件 (站 纺 颖 F) 。 坦 看 (V。 履 基 冯 (A) 工具 (Tm) 可 册 (H) 


myDate1 所 代表 的 时 间 为 
myDate2 所 代表 的 时 | 
myDate3 六 代表 的 时 间 | 
myDate4 扩 代表 的 时 则 为 ，20; 4 
myDate5 训 代表 的 时 | 间 为 ，1970 年 1 月 1 日 8:00:20 


2017 年 10 月 20 日 16:01:28 
2017 年 6 月 10 昌 0: 
2017 年 6 月 10 日 0: 

17 年 11 月 19 日 16:16:16 


2. Date 对 象 的 属性 


图 16-6 创建 日 期 对 象 


Date 日 期 对 象 只 包含 两 个 属性 ， 分 别 是 constructor 和 prototype， 如 表 16-3 所 示 。 


表 16-3 ”Date 对 象 的 属性 及 说 明 


属 性 描 述 
constructor 返回 对 创建 此 对 象 的 Date 函数 的 引用 
Prototype 允许 用 户 向 对 象 添加 属性 和 方法 


【 例 16-7】 实例 文件 ，ch16\Chap16.7.html〉 显 示 当前 系统 的 月 份 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> Date 对 象 属性 的 应 用 </title> 
</head> 

<body> 


<p id="demo"> 单 击 "获取 月 份 "按钮 来 调用 新 的 myMet () 方 法 ,并 显示 这 个 月 的 月 份 </p> 


<button onclick="myFunction() "> 获取 月 份 </button> 


<script> 
// 创 建 一 个 新 的 日 期 对 象 方法 : 


Date.prototype.myMet=function () { 


if (this.getMonth()==0) {this.myProp="— 月 "}; 


if (this.getMonth()==1) {this.myProp= 
if (this.getMonth()==2) {this.myProp= 


if (this.getMonth()==3) {this.myProp=" 四 月 "}; 
if (this.getMonth()==4) {this.myProp=" 五 月 "}; 
if (this.getMonth()==5) {this.myProp=" 六 月 "}; 
if (this.getMonth()==6) {this.myProp=" 七 月 "}; 
if (this.getMonth()==7) {this.myProp=" 八 月 "}; 
if (this.getMonth()==8) {this.myProp=" 九 月 "}; 
if (this.getMonth()==9) {this.myProp=" 十 月 "}; 
if (this.getMonth()==10) {this.myProp=" 十 一 月 "}; 
if (this.getMonth()==11) {this.myProp=" 十 二 月 "}; 


} 
// 创 建 一 个 Date 对象, 调用 对 象 的 mYMet 方法 : 


function myFunction(){ 
var d = new Date(); 


d.myMet (); 


var x=document.getElementById ("demo"); 
x.innerHTML=d.myProp; 


} 
</script> 
</body> 
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相关 的 代码 实例 请 参考 Chap16.7.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-7 


所 示 。 


单 击 “ 获 取 月 份 ” 按 钮 ， 


过 
EW 


(@ Dep -0 Gomantman < 
又 件 旧 。 痪 多 日 ” 理 要 (V) 履 茂 SA 工具 (本 划 (H) 


单 击 【获取 月 份 3 技 刍 未 调用 新 的 myMer() 方 法 ， 并 显示 这 个 月 的 月 份 
如 到 月 从 


16-7 ”运行 结果 预览 效果 


- 0O x 
@ 司 CNusersvqiangu\Doc  - 上 | 车 Date 对 象 属性 的 应 用 
| Hn wa 二 ms IRD wo 


十 月 
获取 月 份 


图 16-8 显示 当前 系统 的 月 份 


即 可 在 浏览 器 窗口 中 显示 当前 系统 的 月 份 ， 如 图 16-8 所 示 。 


为 这 两 个 属性 在 每 个 内 部 对 象 中 都 有 有， 前面 在 讲 数组 对 象 时 已 经 讲 过 ， 这 里 不 再 著述 。 


3. Date 对 象 的 常用 方法 
日 期 对 象 的 方法 可 分 为 三 大 组 : setXxx、getXxx、toXxx。setXxx 方法 用 于 设置 时 间 和 日 期 值 ;, getXxx 
于 获取 时 间 和 日 期 值 ，toXxx 主要 是 将 日 期 转换 成 指定 格式 。Date (日 期 ) 对 象 的 方法 如 表 16-4 
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表 16-4 ”Date 对 象 的 方法 


方 法 描述 
getDate0) 从 Date 对 象 返回 一 个 月 中 的 某 一 天 (1~31) 
getDay0 从 Date 对 象 返回 一 周 中 的 某 一 天 (0 一 6) 
getFullYear() 从 Date 对 象 以 四 位 数字 返回 年 份 
getHoursO) 返回 Date 对 象 的 小 时 (0 一 23) 
getMilliseconds0) 返回 Date 对 象 的 毫秒 (0 一 999) 
getMinutes() 返回 Date 对 象 的 分 钟 (0 一 59) 
getMonth0 从 Date 对 象 返回 月 份 (0 一 11) 
getSeconds0) 返回 Date 对 象 的 秒 数 (0 ~ 59) 
getTime0 返回 1970 年 1 月 1 日 至 今 的 毫秒 数 
getTimezoneOffset0 返回 本 地 时 间 与 格林 威 治标 准时 间 (GMT) 的 分 钟 差 
getUTCDate0) 根据 世界 时 从 Date 对 象 返回 月 中 的 一 天 (1 ~ 31) 
getUTCDay0 根据 世界 时 从 Date 对 象 返回 周 中 的 一 天 (0 ~ 6) 
getUTCFullYear0 根据 世界 时 从 Date 对 象 返回 四 位 数 的 年 份 
getUTCHours| 根据 世界 时 返回 Date 对 象 的 小 时 (0 ~ 23) 
getUTCMilliseconds() 根据 世界 时 返回 Date 对 象 的 毫秒 (0 一 999) 
getUTCMinutes| 根据 世界 时 返回 Date 对 象 的 分 钟 (0 一 59) 
getUTCMonth() 根据 世界 时 从 Date 对 象 返回 月 份 (0 ~ 11) 
getUTCSeconds0 根据 世界 时 返回 Date 对 象 的 秒 钟 (0 一 59) 
getYear() 已 废弃 。 请 使 用 getFullYear () 方法 代替 
parse0 返回 1970 年 1 月 1 日 午夜 到 指定 日 期 〈 字 符 串 ) 的 毫秒 数 
setDate0) 设置 Date 对 象 中 月 的 某 一 天 (1 一 31) 
setFullYear0 设置 Date 对 象 中 的 年 份 四 位 数字 ) 
setHours0 设置 Date 对 象 中 的 小 时 (0 一 23) 
setMillisecondsO 设置 Date 对 象 中 的 毫秒 (0 一 999) 
setMinutes| 设置 Date 对 象 中 的 分 钟 (0 一 59) 
setMonthO 设置 Date 对 象 中 月 份 (0 一 11) 
setSeconds0 设置 Date 对 象 中 的 秒 钟 (0 ~ 59) 
setTimeO setTime () 方 法 以 毫秒 设置 Date 对 象 
setUTCDate0 根据 世界 时 设置 Date 对 象 中 月 份 的 一 天 (1 一 31) 
setUTCFullYear0 根据 世界 时 设置 Date 对 象 中 的 年 份 〈 四 位 数字 ) 
setUTCHours| 根据 世界 时 设置 Date 对 象 中 的 小 时 (0 一 23) 
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续 表 


方 法 描 述 


setUTCMilliseconds0) 根据 世界 时 设置 Date 对 象 中 的 毫秒 (0 一 999) 
setUTCMinutes0 根据 世界 时 设置 Date 对 象 中 的 分 钟 (0 一 59) 
setUTCMonthO 根据 世界 时 设置 Date 对 象 中 的 月 份 (0 ~ 11) 
setUTCSeconds0 用 于 根据 世界 时 (UTC) 设置 指定 时 间 的 秒 字段 

setYear0) 已 废弃 。 请 使 用 setFullYear() 方 法 代替 

toDateString() 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 

toGMTString0 已 废弃 。 请 使 用 toUTCString() 方 法 代替 

toISOString0) 使 用 ISO 标准 返回 字符 串 的 日 期 格式 

toJSONO 以 JSON 数据 格式 返回 日 期 字符 串 

toLocaleDateString0) 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 日 期 部 分 转换 为 字符 串 
toLocaleTimeString0) 根据 本 地 时 间 格 式 ， 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 
toLocaleString0 根据 本 地 时 间 格 式 ， 把 Date 对 象 转换 为 字符 串 

toString0 把 Date 对 象 转换 为 字符 串 

toTimeSting0 把 Date 对 象 的 时 间 部 分 转换 为 字符 串 

toUTCString0 根据 世界 时 ， 把 Date 对 象 转换 为 字符 串 

UTC0 根据 世界 时 返回 1970 年 1 月 1 日 到 指定 日 期 的 毫秒 数 
valueOfO 返回 Date 对 象 的 原始 值 


【 例 16-8】〗 (实例 文件 ，chl16\Chap16.8.html) 在 网 页 中 显示 时 钟 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 在 网 页 中 显示 时 钟 </title> 

<script> 

function startTime (){ 
var today=new Date () 7 
var h=today.getHours(); 
var m=today-getMinutes () 7 
var s=today.getSeconds () 7 
m=checkTime (m) 7 
s=checkTime (s); 


// 在 小 于 10 的 数字 前 加 一 个 '0 


document .getElementById('txt') - innerHTML=h+" :w+m+n :n+S7 
t=setTimeout (function() {startTime () }, 500); 


} 
function checkTime (i){ 
if (i<10)1{ 
i="0" + i; 
} 
return i; 
} 
</script> 
</head> 
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<body onload="startTime () "> 
<div id="txt"></div> 


</body> 
区 
相关 的 代码 实例 请 参考 Chap16.8.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-9 
所 示 。 


s 口 x 
司 CNUsersWqiangu\Doc 用 "0 大 在 网 页 中 显示 时 帅 
文件 (月 篇 得 (E) 豆 看 (V】 。 收 坦 夹 IA) 工具 (T) 帮助 (H) 
16:40:35 


16-9 在 网 页 中 显示 时 钟 


16.2.3 ”数组 对 象 


Array (数组 ) 对 象 是 JavaScript 中 常用 的 内 置 对 象 之 一 ， 通 过 调用 Array (数组 ) 对 象 的 各 种 方法 ， 可 
以 方便 地 对 数组 进行 排序 、 删 除 、 合 并 等 操作 。 有 关 数 组 对 象 的 介绍 ， 将 在 下 面 小 节 详细 介绍 。 


16.2.4。 过 辑 对 象 


Boolean ( 逮 辑 ) 对 象 用 于 转换 一 个 不 是 Boolean 类 型 的 值 ， 转 换 的 结果 为 Boolean 类 型 值 ， 包 括 true 
和 false。 

1. 创建 Boolean 对 象 

Boolean 对 象 代表 两 个 值 : true 或 者 false， 下 面 的 代码 定义 了 一 个 名 为 myBoolean 的 布尔 对 象 ， 具 体格 
式 如 下 : 

var myBoolean=new Boolean () 7 

如 果 布尔 对 象 无 初始 值 或 者 其 值 为 : 0、-0、null、""、false、undefined 和 NaN， 那 么 对 象 的 值 为 false。 
否则 ， 其 值 为 tue。 

2. 创建 Boolean 的 属性 

Boolean 日 期 对 象 只 包含 两 个 属性 ， 分 别 是 constructor 和 prototype， 如 表 16-5 所 示 。 


表 16-5 ”Boolean 对 象 的 属性 及 说 明 


属 性 描 述 
constructor 返回 对 创建 此 对 象 的 Boolean 函数 的 引用 
prototype 人 允许 用 户 向 对 象 添加 属性 和 方法 


【 例 16-9】 (实例 文件 ， chl6\Chap16.9.html) 获取 颜色 。 


<!DOCTYPE html> 
<html> 
<head> 
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<title>Boolean 对 象 属 性 的 应 用 </title> 

</head> 

<body> 

<p id="demo"> 单 击 "获取 颜色 "按钮 , 如果 boolean 值 为 <em>true</em> 显 示 "green", 和 否则 显示 "red"。</p> 
<button onclick="myFunction () "> 获取 颜色 </button> 


<script> 
Boolean.prototype.myColor=function(){ 
if (this.valueof ()==true){ 


this.color="green"; 
则 
else{ 
this.color="red"; 
1 
function myFunction(){ 
Var a = new Boolean(1); 
a.myColor (); 
var x=document.getElementById ("demo"); 
x.innerHTML=a.color; 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap16.9.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-10 
所 示 。 


口 x 
@ 站 cAUsers\oiangu\Doc 了 - C | 总 Bolean 寺 委 层 性 和 的。 x 
文体 思考 日 ， 章 看 M)。 收 巷 交 A) 工具 mT 攻取 (H) 
单 击 【 获 取 颜 色 】 按钮 如果 boolean 值 为 rue 显示 
否则 显示 “red”， 


“green”, 理 


区 取 颜 色 


图 16-10 ”运行 结果 预览 效果 
单 击 “ 获 取 颜 色 ” 按 钮 ， 即 可 在 浏览 器 窗口 中 显示 符合 条 件 的 颜色 信息 ， 如 图 16-11 所 示 。 


oO x 
@ 和 CNUsersvqiangu\Dec DP» © | 是 Boclean 寺 人 性 的 
文件 (如) 前 看 V) 收藏 夫 (A)】 工具 (7) 帮 胎 (H) 


Ereen 


EE 


图 16-11 显示 复合 条 件 的 颜色 信息 


3. Boolean 对 象 的 方法 
Boolean 对 象 的 方法 包括 两 个 ， 如 表 16-6 所 示 。 


表 16-6 ”Boolean 对 象 的 方法 


方法 描 述 
tostring0 把 布尔 值 转换 为 字符 串 ， 并 返回 结果 
valueOfO 返回 Boolean 对 象 的 原始 值 
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【 例 16-10】 实例 文件 ，ch16\Chap16.10.html》 把 布尔 值 转换 为 字符 串 ， 并 返回 结果 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 把 布尔 值 转换 为 字符 囊 </title> 
</head> 
<body> 
<p id="demo"> 单 击 "获取 结果 "按钮 ,以 字符 串 的 形式 显示 Boolean 对 象 的 值 。</P> 
<button onclick="myFunction() "> 获取 结果 </button> 
<script> 
function myFunction(){ 
var myvar=new Boolean(1); 
var x=document .getElementById ("demo"); 
x.innerHTML=myvar .tostring(); 
} 


</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap16.10.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-12 
所 示 。 


= 
@ 站 CNusereqiangwDoc 只 -C。 司 天 太 外 国名 搞 为 字 行 齐 x 
ER 


单 击 “ 获 取 结果 ”按钮 ， 以 字符 串 的 形式 显示 Boolean 对 象 的 值 
[nan | 


16-12 ”运行 结果 预览 效果 
单 击 “ 获 取 结 果 ” 按 钮 ， 即 可 在 浏览 器 窗口 中 以 字符 串 的 形式 显示 布尔 值 ， 如 图 16-13 所 示 。 
口 x 


© 装 CsersqiangulDoc 只 - C | 局 扫 外 全 轩 拉 为 3 条 时 x 
文件 从 帝 太 (要 看 V) 收 大 夫 [A) 工具 人 T) 才 卫 (H) 


图 16-13 显示 运行 结果 
注意 : 当 需 要 把 Boolean 对 象 转换 成 字符 串 的 情况 ，JavaScript 会 自动 调用 此 方法 。 


16.2.5 ”算数 对 象 


算数 (Math) 对 象 的 作用 是 执行 常见 的 算数 任务 。 这 是 因为 Math 对 象 提供 了 大 量 的 数学 常量 和 数学 函 
数 。 在 使 用 Math 对 象 时 ， 不 能 使 用 关键 字 new 来 创建 对 象 实例 ， 而 应 直接 使 用 “对 象 名 .成 员 ” 的 格式 来 
访问 其 属性 和 方法 。 

1. 创建 Math 对 象 

创建 Math 对 象 的 语法 结构 如 下 。 
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Math.[{propertylmethod}] 
其 中 ，property 为 必 选 项 ， 为 Math 对 象 的 一 个 属性 名 ; method 也 是 必 选 项 ， 为 Math 对 象 的 一 个 方法 名 。 
具体 应 用 实例 代码 格式 如 下 : 


Var x = Math.PI; // 返 回 PI 
var y = Math.sqrt (16); // 返 回 16 的 平方 根 
2. Math 对 象 的 属性 


Math 对 象 的 属性 是 数学 中 常用 的 常量 ，Math 对 象 的 属性 及 说 明 如 表 16-7 所 示 。 
表 16-7 Math 对 象 的 属性 


属 性 描 述 
E 返回 算术 常量 e， 即 自然 对 数 的 底数 〈 约 等 于 2.718) 
LN2 返回 2 的 自然 对 数 〈 约 等 于 0.693) 
LN10 返回 10 的 自然 对 数 〈 约 等 于 2.302) 
LOG2E 返回 以 2 为 底 的 e 的 对 数 〈 约 等 于 1.414) 
LOG10E 返回 以 10 为 底 的 e 的 对 数 〈 约 等 于 0.434) 
PI 返回 圆周 率 ( 约 等 于 3.14159) 
SQRT1 2 返回 2 的 平方 根 的 倒数 〈 约 等 于 0.707) 
SQRT2 返回 2 的 平方 根 ( 约 等 于 1.414) 


【 例 16-11】 实例 文件 ，ch16\Chap16.11.html) Math 对 象 属性 的 应 用 。 


<!DocTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

var numVarl=Math.E 

document .write("E 属性 应 用 后 的 计算 结果 为 : " +numVarl); 
document .write ("<br>"); 

document .write ("<br>"); 

var numVar2=Math.LN2 

document .write ("LN2 属性 应 用 后 的 计算 结果 为 : " +numVar2); 
document .write ("<br>"); 

document .write ("<br>"); 

var numVar3=Math.LN10 

document .write ("LN10 属性 应 用 后 的 计算 结果 为 : " +numVar3); 
document .write ("<br>"); 

document .write ("<br>"); 

var numVar4=Math. LOG2E 

document .write ("LOG2E 属性 应 用 后 的 计算 结果 为 : " +numVar4) 7 
document .write ("<br>"); 

document .write ("<br>"); 

var numVar5=Math。 LOG10E 

document .write ("LOG10E 属性 应 用 后 的 计算 结果 为 : " +numVar5); 
document .write ("<br>"); 

document -write ("<br>"); 

var numVar6=Math. PI 

document .write ("PI 属性 应 用 后 的 计算 结果 为 : ” +numVar6) 7 


document -write ("<br>"); 
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document .write ("<br>"); 

Var numVar7=Math. SORT1 2 

document -write ("SQRT1_2 属性 应 用 后 的 计算 结果 为 : ”+numVar7); 
document .write ("<br>"); 

document .write ("<br>"); 

var numVar8=Math. SQRT2 

document .write ("SQRT2 属性 应 用 后 的 计算 结果 为 : "+numVar8); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.11.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-14 
所 示 。 


HN WR EV x TR WC 

E 属 性 应 用 后 的 计 T18281828459045 

U2 属性 应 用 结果 为 ，0. 6931471805599453 

FI 属性 应 用 后 的 计算 结果 为 ，3. 14159: 

SORT1_2 属 性 应 用 后 的 计算 

SQRT2 属 性 应 用 后 的 计算 

图 16-14 算数 计算 结果 
3. Math 对 象 的 方法 
Math 对 象 的 方法 是 数学 中 常用 的 函数 ， 如 表 16-8 所 示 。 
表 16-8 Math 对 象 的 方法 
为 ” 污 描述 

abs(x) 返回 数 的 绝对 值 
acos(x) 返回 数 的 反 余弦 值 
asin(x) 返回 数 的 反正 弦 值 
atan(x) 以 介 于 -PL2 与 PV2 弧度 之 间 的 数值 来 返回 x 的 反正 切 值 
atan2(y,x) 返回 从 于 轴 到 点 (x,y) 的 角度 ( 介 于 -PL2 与 PV2 弧度 之 间 ) 
ceil(x) 对 数 进行 上 舍 入 
cos(x) 返回 数 的 余弦 
exp(x) 返回 e 的 指数 
floor(x) 对 数 进行 下 舍 入 
log(x) 返回 数 的 自然 对 数 〈 底 为 e) 
max(x.y,z..…1) 返回 x,y,z…,n 中 的 最 大 值 
mix(x.y,z.....0) 返回 x,y,z.…,n 中 的 最 小 值 
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方法 描 述 
pow(x.y) 返回 x 的 y 次 器 
random(O) 返回 0 一 1 的 随机 数 
round(x) 把 数 四 合 五 入 为 最 接近 的 整数 
sin(x) | 返回 数 的 正弦 
sqrtG | 返回 数 的 平方 根 


tan(x) 返回 角 的 正切 
下 面 以 返回 两 个 或 多 个 参数 中 的 最 大 值 或 最 小 值 为 例 ， 来 介绍 Math 对 象 方法 的 使 用 技巧 。 使 用 maxO 
方法 可 返回 两 个 指定 的 数 中 带 有 较 大 的 值 的 那个 数 。 语 法 格式 如 下 : 
Math.max (x...) 
其 中 ， 参 数 义 为 0 或 多 个 值 。 其 返回 值 为 参数 中 最 大 的 数值 。 
使 用 min0 方 法 可 返回 两 个 指定 的 数 中 带 有 较 小 的 值 的 那个 数 。 语 法 格式 如 下 : 
Math.min(x...) 
其 中 ,参数 义 为 0 或 多 个 值 。 其 返回 值 为 参数 中 最 小 的 数值 。 
【 例 16-12】” 实例 文件 ，ch16\Chap16.12.html〉 返 回 参 数 当中 的 最 大 值 或 最 小 值 。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

Var numVar=5; 

Var numVarl=2; 

Var numVar2=-4; 

Var numVar3=1; 

document .write ("5、2、-4、1 中 最 大 的 值 为 : "+ Math.max (numVar, numVarl,numVar2,numVar3) + "<br />") 
document .write ("5、2、-4、1 中 最 小 的 值 为 : "+ Math.min (numVar, numVarl,numVar2, numVar3) + "<br />") 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.12.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-15 
所 示 。 


- ODO x 
居 CUsers\qiangu\Doc "0 愿 cNusersvqiangupo| 
文件 (有 ”篇 岛 (可 者 V)】 收藏 失 A) 工具 mT) 帮助 (H) 


4、1 中 最 大 的 值 为 ，5 
5、2、-4、1 中 最 小 的 值 为 ，-4 


图 16-15 ”返回 数组 中 的 最 大 值 或 最 小 值 


16.2.6 ”数值 对 象 和 
回 ， 
Number 对 象 是 原始 数值 的 包装 对 象 ， 代 表 数 值 数据 类 型 和 提供 数值 的 对 象 ， 如 果 一 个 参数 值 不 能 转换 
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为 一 个 数字 将 返回 NaN 〈 非 数字 值 )。 


1. 创建 Number 对 象 

在 创建 Number 对 象 时 ， 可 以 不 与 运算 符 new 一 起 使 用 ， 而 直接 作为 转换 函数 来 使 用 。 以 这 种 方式 调 
用 Number 对 象 时 ， 它 会 把 自己 的 参数 转化 成 一 个 数字 ， 然 后 返回 转换 后 的 原始 数值 。 
创建 Number 对 象 的 语法 结构 如 下 ; 
var num = new Number (value); 


其 中 , num 表示 要 赋值 为 Number 对 象 的 变量 名 ; value 为 可 选项 , 是 新 对 象 的 数字 值 。 如 果 忽 略 Boolvalue， 


可 


则 返回 值 为 0。 
【 例 16-13】 《〈 实 例文 件 ，chl16\Chap16.13.html) 创建 一 个 Number 对象。 
<html> 
<body> 
<script type="text/javascript"> 
var numobjl=new Number () // 创 建 Number 对 象 


var numobj2=new Number (0) 

var numobj3=new Number (-1) 
document .write (numObj1+"<br>"); 
document .write (numObj2+"<br>"); 
document .write (numObj3+"<br>"); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.13.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-16 
所 示 。 


- 0O x 
@ 全 CUsers\qiangu\Doc PD ~- © BC\Users\qiangu\Do.. 
有 
0 


图 16-16 创建 数值 对 象 


2. Number 对 象 的 属性 
Number 对 象 包括 7 个 属性 ， 如 表 16-9 所 示 。 其 中 ，constructor 和 prototype 两 个 属性 在 每 个 内 部 对 象 
都 有 ， 前 面 已 经 介绍 过 ， 这 里 不 再 著述 。 


表 16-9 Number 对 象 的 属性 


constructor 返回 对 创建 此 对 象 的 Number 函数 的 引用 
MAX VALUE 可 表示 的 最 大 的 数 

MIN VALUE 可 表示 的 最 小 的 数 

NaN 非 数 字 值 
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续 表 


属 性 描述 
负 无 穷 大 ， 溢 出 时 返回 该 值 
正 无 穷 大 ， 溢 出 时 返回 该 值 
prototype 使 您 有 能 力 向 对 象 添加 属性 和 方法 
【 例 16-14】 实例 文件 ，ch16\Chap16.14.html) 返回 JavaScript 中 最 大 与 最 小 的 数值 。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

document .write ("JavaScript 中 最 大 的 数值 为 : "+Number .MAX VALUE+"<br>"); 
document .write ("JavaScript 中 最 小 的 数值 为 : "+Number .MIN_VALUE); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.14.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-17 
所 示 。 


NEGATIVE INEFINITY 


POSITIVE INEFINITY 


- 口 x 
图 cNueersqiangwpocP ~ © | 其 CNUsersqiangu\Do.. 
文中。 竟 且 日， 下 看 Mr 工具 总 (H) 


JavaScript 中 最 大 的 数值 为 ，1. 7976931343623157e+308 
JavaScript 中 最 小 的 数值 为 ，5e-324 


图 16-17 返回 JavaScript 中 最 大 值 与 最 小 值 
3. Number 对 象 的 方法 
Number 对 象 包含 的 方法 并 不 多 ， 这 些 方法 主要 用 于 数据 类 型 的 转换 ， 如 表 16-10 所 示 。 


表 16-10 ”Number 对 象 的 方法 


放手 描 述 
toString() 把 数字 转换 为 字符 串 ， 使 用 指定 的 基数 
toFixed(x) | 把 数字 转换 为 字符 串 ， 结 果 的 小 数 点 后 有 指定 位 数 的 数字 
toExponential(x) | 把 对 象 的 值 转换 为 指数 计数 法 
toPrecision(x) | 把 数字 格式 化 为 指定 的 长 度 


valueOfO 返回 一 个 Number 对 象 的 基本 数字 值 
【 例 16-15】 实例 文件 ，ch16\Chap16.15.html》 四 舍 五 入 时 指定 小 数位 数 。 


<!DOCTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

var number = new Number (12.3848); 
document .write (" 原 数值 为 : "+ number); 
document .write ("<br>")7 
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document -write ("保留 两 位 小 数 的 数值 为 : "+number- toFixed(2)) 

</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap16.15.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-18 
所 示 。 


- OO x 
@ 自 CUsers\qiangu\Doc P - © | 车 cNUsersqiangu\Dpo- x 
文体 月 ”六 得 E) 查看 (V) 收音 夹 A) 工具 (D。 帮 有 动 (H) 


原 数值 为 ，3. 1415926 
保留 两 位 小 数 的 数值 为 ，3. 14 


16-18 ”四舍五入 运算 结果 


16.3 ”对 象 访问 语句 


在 JavaScript 中 ， 用 于 对 象 访问 的 语句 有 两 种 ， 分 别 是 for…in 循环 语句 和 with 语句 。 下 面 详细 介绍 这 
两 种 语句 的 用 法 。 


6.3.1 for…in 循环 语句 


for…in 循环 语句 和 for 语句 十 分 相似 ， 该 语句 用 来 遍历 对 象 的 每 一 个 属性 。 每 次 都 会 将 属性 名 作为 字 
符 串 保存 在 变量 中 。 
for…i 语句 的 语法 格式 如 下 : 


for (variable in object){ 
.SS 七 己 上 ement 
} 


其 中 ，variable 是 一 个 变量 名 ， 声 明 一 个 变量 的 var 语句 、 数 组 的 一 个 元 素 或 者 对 象 的 一 个 属性 。Object 是 一 个 
对 象 名 ， 或 者 是 计算 结果 为 对 象 的 表达 式 。statement 是 一 个 原始 语句 或 者 语句 块 ， 由 它 构建 循环 的 主体 。 
【 例 16-16】》 【实例 文件 ，ch16\Chap16.16.html》for…in 语句 的 使 用 。 


<!DOCTYPE html> 

<head> 

<title> 使 用 for in 语句 </title> 
</head> 

<body> 

<script type="text/javascript"> 
var mybook = new Array() 


mybook[0] = "红楼 梦 " 

mybook[1] = "西游 记 " 

mybook[2] = "水 游 传 " 

mybook[3] = "三 国 演义 " 

for (var i in mybook) // 使 用 for…in 循环 遍历 对 象 mybook 


{ 
document .write (mybook[i] + "<br />") 
} 
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</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap16.16 html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 16-19 所 示 。 


- oO x 
@ 国 CjeergimgiDoc 万 C| 辣 人 ri 
KM) WE) HEM Wi IRT Wm 
红楼 梦 

EY 

水 济 传 

三 国 演义 


图 16-19 for-…in 循环 语句 的 应 用 
16.3.2 ”with 语句 


有 了 with 语句 ,在 存 取 对 象 属性 和 方法 时 就 不 用 重复 指定 参考 对 象 了 , 在 with 语句 块 中 ,凡是 JavaScript 
不 识别 的 属性 和 方法 都 和 该 语句 块 指定 的 对 象 有 关 。 
With 语句 的 语法 格式 如 下 : 


with object { 
statements 
出 


【 例 16-17】 《实例 文件 ，ch16\Chap16.17.html) with 语句 的 应 用 。 


<!DocTYPE html> 
<html> 
<head> 
<title>with 语句 的 使 用 </title> 
</head> 
<body> 
<script type ="text/javascript"> 
var date time=new Date(); 
with(date time){ 
var a=getMonth()+17 
alert (getFullYear ()+" 年 "tat" 月 "+getDate ()+" 日 "+getHours()+":"+getMinutes ()+":"+getSeconds ()) 7 
} 
var date time=new Date(); 
alert (date time.getFullYear()+" 年 "+date time.getMonth()+1+" 月 "+date time.getDate()+" 日 
"+date time.getHours()+":"+date time.getMinutes()+":"+date time.getseconds()); 


</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap16.17.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 16-20 所 示 。 


店 网 页 的 消息 


A 201710A20E 181615 


16-20 ”with 语句 的 应 用 结果 
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16.4 对象 序列 化 


对 象 序列 化 是 指 将 对 象 的 状态 转换 为 字符 串 ， 从 而 存储 在 计算 机 中 ， 以 供 程序 员 连 续 使 用 ， 本 节 介绍 
如 何 对 对 象 进行 序列 化 。 


16.4.1 认识 对 象 序列 化 


使 用 JavaScript JSON 中 的 JSON.stringify0 方 法 可 以 序列 化 对 象 ， 而 使 用 JSON.parse0 可 以 还 原 JavaScript 
对 象 ， 也 就 是 对 象 的 反 序列 化 。 

JSON， 全 称 是 JavaScript Object Notation。 它 是 基于 JavaScript 编程 语言 标准 的 一 种 轻 量 级 的 数据 交换 格 
式 ， 主 要 用 于 与 服务 器 进行 交换 数据 。 与 XML 相 类 似 ， 它 独立 语言 ， 在 跨 平台 数据 传输 上 有 很 大 的 优势 。 


16 .4.2 对象 序列 化 的 意义 


世间 万 物 ， 都 有 其 存在 的 原因 ， 为 什么 会 有 对 象 序列 化 呢 ? 因为 程序 员 需 要 它 。 既 然 是 对 象 序列 化 ， 
那 就 需要 先 从 一 个 对 象 说 起 ， 例 如 下 面 一 个 实例 代码 : 

var obj = {x:1, y:2}; 

当 这 句 代 码 运 行 时 ， 对 象 obj 的 内 容 会 存储 在 一 块 内 存 中 ， 而 obj 本 身 存储 的 只 是 这 块 内 存 的 地 址 的 映 
射 而 已 。 简 单 地 说 ， 对 象 obj 就 是 我 们 的 程序 在 计算 机 通电 时 ， 在 内 存 中 维护 的 一 种 东西 ， 如 果 我 们 的 程 
序 停止 运行 了 ， 或 者 是 计算 机 断 电 了 ， 对 象 obj 将 不 复 存在 。 

那么 如 何 把 对 象 obj 的 内 容 保 存在 磁盘 上 呢 ? 也 就 是 说 在 没 电 时 继续 保留 着 ， 这 时 就 需要 把 对 象 obj 
序列 化 ， 也 就 是 说 把 obj 的 内 容 转 换 成 一 个 字符 串 的 形式 ， 然 后 再 保存 在 磁盘 上 。 

另外 ， 我 们 又 怎么 通过 HTTP 协议 把 对 象 obj 的 内 容 发 送 到 客户 端 呢 ? 没 错 ， 还 是 需要 先 把 对 象 obj 
序列 化 ， 然 后 客户 端 根 据 接收 到 的 字符 串 再 反 序列 化 ， 也 就 是 将 字符 串 还 原 为 对 象 ， 从 而 解析 出 相应 的 对 
象 ， 这 也 正 是 对 象 序列 化 与 反 序列 化 的 意义 所 在 。 


人 16.4.3 ”对 象 序列 化 
JavaScript 中 的 对 象 序列 化 是 通过 JSON.stringify0 来 实现 的 ， 具 体 的 语法 格式 如 下 : 


JSON. stringify (value[, replacer[, space]]) 

参数 说 明 : 

value: 必 选 项 ， 是 指 一 个 有 效 的 JSON 字符 串 。 

replacer: 可 选项 , 用 于 转换 结果 的 函数 或 数组 。 如 果 replacer 为 函数 , 则 JSON.stringify 将 调用 该 函数 ， 
并 传 入 每 个 成 员 的 键 和 值 。 使 用 返回 值 而 不 是 原始 值 。 如 果 此 函数 返回 undefined， 则 排除 成 员 。 根 
对 象 的 键 是 一 个 空 字符 串 :""。 如 果 replacer 是 一 个 数组 ， 则 公转 换 该 数组 中 具有 键 值 的 成 员 。 成 
员 的 转换 顺序 与 键 在 数组 中 的 顺序 一 样 。 当 value 参数 也 为 数组 时 ， 将 忽略 replacer 数组 。 

space: 可 选项 ， 文 本 添加 缩 进 、 空 格 和 换行 符 ， 如 果 space 是 一 个 数字 ， 则 返回 值 文 本 在 每 个 级 别 缩 进 
指定 数目 的 空格 ， 如 果 space 大 于 10， 则 文本 缩 进 10 个 空格 。space 有 可 以 使 用 非 数 字 ， 如 : \t。 

返回 值 : 返回 包含 JSON 文本 的 字符 串 。 

【 例 16-18】 (实例 文件 ，ch16\Chap16.18.html》 对 象 序列 化 操作 。 


316 


第 国 章 Javascript 对 象 与 数组 


相关 的 代码 实例 请 参考 Chap16.18.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-21 
所 示 。 


人 
国王 coreeroopcep -clBmamm = 


Trans : 语 宝 网 直 -edcar: rrp:/femw Taobas co 
使 用 过 数 情 况 ， 


name 光宇 同 址 ”， 
四 


图 16-21 对 象 的 序列 化 操作 结果 


JavaScript 中 的 对 象 反 序列 化 是 通过 JSON-.parse0 来 实现 的 ， 该 方法 用 于 将 一 个 JSON 字符 串 转换 为 对 
象 。 具 体 的 语法 格式 如 下 : 
son.parseltextl, reviver]) 

参数 说 明 : 

text; 必 选 项 ， 是 指 一 个 有 效 的 JSON 字符 串 。 

Teviver: 可 选项 ， 一 个 转换 结果 的 函数 ， 将 为 对 象 的 每 个 成 员 调 用 此 函数 。 

返回 值 : 返回 给 定 JSON 字符 串 转换 后 的 对 象 。 

【 例 16-19】 实例 文件 ，ch16\Chap16.19.html》 对 象 的 反 序列 化 操作 。 
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相关 的 代码 实例 请 参考 Chap16.19.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-22 
所 示 。 
CE 
| #0) ul EV as) IED MoH 
从 JSON 字 符 吊 中 创建 一 个 对 象 


(Google http://mm. Google. com 


图 16-22 ”对 象 的 反 序列 化 操作 结果 


另外 ， 在 反 序列 化 操作 的 过 程 中 ， 还 可 以 通过 添加 可 选 参 数 ， 来 对 对 象 进行 反 序列 化 操作 。 
【 例 16-20】 (实例 文件 ，ch16\Chap16.20.html》 对 象 反 序列 化 操作 。 


相关 的 代码 实例 请 参考 Chap16.20.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-23 
所 示 。 


图 16-23 反 序 列 化 操作 并 回调 函数 
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16.5 ”创建 对 象 的 常用 模式 


创建 对 象 的 常用 模式 包括 工厂 模式 、 自 定义 构造 函数 模式 、 原 型 模式 、 原 型 模式 和 构造 函数 模式 、 动 
态 原型 模式 等 。 本 节 介绍 创建 对 象 的 常用 模式 。 


1. 工厂 模式 
工厂 模式 ， 顾 名 思 义 ， 这 是 一 个 类 似 于 机 器 的 方法 ， 只 要 把 原料 (参数 ) 放 入 机 器 ， 经 过 机 器 加 工 ， 
就 能 获得 想 要 的 对 象 。 具 体 实例 代码 如 下 : 
var lev=function(){ 
return "宝宝 "; 
Fi 
function Parent(){ 
var Child = new Object(); 
Child.name=" 佑 佑 "7 
Child.age="3"; 
Child. lev=lev; 
return Child; 
]7 
var x = Parent()7 
alert (x.name); 
alert (x.lev()); 


使 用 工厂 模式 创建 对 象 时 注意 以 下 几 点 : 

在 函数 中 定义 对 象 ， 并 定义 对 象 的 各 种 属性 ， 虽 然 属性 可 以 为 方法 ， 但 是 建议 将 属性 为 方法 的 属性 定 

义 到 函数 之 外 ， 这 样 可 以 避免 重复 创建 该 方法 。 

引用 该 对 象 的 时 候 ， 这 里 使 用 的 是 var x=Parent0 而 不 是 var x=new Parent0: 因 为 后 者 会 可 能 出 现 很 多 问题 
(前 者 也 成 为 工厂 经 典 方式 ， 后 者 称 为 混合 工厂 方式 )， 不 推荐 使 用 new 的 方式 使 用 该 对 象 。 

在 函数 的 最 后 返回 该 对 象 。 

在 创建 对 象 时 ， 不 推荐 使 用 这 种 方式 创建 对 象 ， 但 应 该 了 解 。 


2. 自 定 义 构造 函数 模式 
与 工 三 方式 相 比 ， 使 用 构造 函数 方式 创建 对 象 ， 无 须 在 函数 内 部 重建 创建 对 象 ， 而 使 用 this 指 代 ， 并 区 
且 函 数 无 须 明 确 retum。 具 体 实例 代码 如 下 : 


var lev=function(){ 
return "宝宝 "; 

}; 

function Parent (){ // 自 定义 构造 函数 
this.name=" 佑 佑 "; 
this.age="3"; 
this.1lev=lev; 

1 

Var x =new Parent (); 

alert (x.name); 

alert (x.lev()); 


使 用 自 定义 构造 函数 模式 创建 对 象 时 注意 以 下 几 点 : 
工厂 模式 一 样 ， 虽 然 属性 的 值 可 以 为 方法 ， 仍 然 建议 将 该 方法 定义 在 函数 之 外 。 
样 的 ， 不 推荐 使 用 这 种 方式 创建 对 象 ， 但 仍 需要 了 解 。 


辣 
同 
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3. 原型 模式 
在 使 用 原型 模式 创建 对 象 时 ， 函 数 中 不 对 属性 进行 定义 ， 而 是 利用 prototype 属性 对 属性 进行 定义 。 但 
， 在 具体 实际 应 用 的 过 程 中 ， 不 推荐 使 用 这 样 方式 创建 对 象 。 具 体 的 实例 代码 如 下 : 


var lev=function(){ 
return "宝宝 "; 

bi 

function Parent (){ 
Parent .prototype.name=" 刘 天 售 "; 
Parent .prototype.age="3"; 
Parent .prototype.lev=lev; 

bs; 

var x =new Parent (); 

alert (x.name); 

alert (x.lev()); 


4. 原型 模式 和 构造 函数 模式 

原型 模式 和 构造 函数 模式 是 指 混合 搭配 使 用 构造 函数 方式 和 原型 方式 ， 这 种 创建 对 象 的 模式 是 将 所 有 
属性 不 是 方法 的 属性 定义 在 函数 中 构造 函数 方式 )， 同 时 ， 将 所 有 属性 值 为 方法 的 属性 利用 prototype 在 
函数 之 外 定义 原型 方式 )， 具 体 的 实例 代码 如 下 : 


function Parent (){ 
this.name=" 佑 佑 "了 
this.age=4; 

i 

Parent .prototype.lev=function(){ 
return this.name; 

了 7 

var x =new Parent()7 

alert (x.lev()); 


提示 : 在 实际 应 用 的 过 程 中 ， 推 荐 使 用 这 种 方法 创建 对 象 。 


5. 动态 原型 模式 
动态 原型 方式 可 以 理解 为 混合 构造 函数 ， 它 是 原型 方式 的 一 个 特例 ， 具 体 的 实例 代码 如 下 : 
function Parent (){ 
this.name=" 佑 佑 "7 
this.age=4; 
if(typeof Parent. lev=="undefined"){ 
Parent .prototype.lev=function () { 
return this.name; 
时 
Parent. lev=true; 


]7 
var x =new Parent() 1 
alert (x.lev()); 


在 该 模式 中 ， 属 性 为 方法 的 属性 直接 在 函数 中 进行 了 定义 ， 但 是 需要 保证 创建 该 对 象 的 实例 时 ， 属 性 
的 方法 不 会 被 重复 创建 ， 具 体 的 实例 代码 如 下 : 


if(typeof Parent. lev=="undefined"){ 


Parent. lev=true; 


i 
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16.6 ”数组 对 象 


数组 对 象 是 使 用 单独 的 变量 名 来 存储 一 系列 的 值 ， 并 且 可 以 用 变量 名 访问 任何 一 个 值 ， 数 组 中 的 每 个 
元 素 都 有 自己 的 也， 以 便 它 可 以 很 容易 地 被 访问 到 。 例 如 :如 果 你 有 一 组 数据 〈 例 如 车 名 字 )， 存 在 单独 
变量 如 下 : 

Var carl="Saab"; 


Var car2="VolVon"7 
Var car3="BMW"; 


然而 ， 如 果 你 想 从 中 找 出 某 一 辆 车 ， 并 且 不 是 3 辆 ， 而 是 300 辆 呢 ? 这 将 不 是 一 件 容易 的 事 ! 最 好 的 
方法 就 是 用 数组 。 


16.6.1 创建 数组 


数组 是 具有 相同 数据 类 型 的 变量 集合 ， 这 些 变量 都 可 以 通过 索引 进行 访问 。 数 组 中 的 变量 称 为 数组 的 
元 素 ， 数 组 能 够 容纳 元 素 的 数量 称 为 数组 的 长 度 。 创 建 数组 对 象 有 以 下 3 种 方法 。 

第 一 种 ， 常 规 方式 ， 具 体格 式 如 下 : 

var 数组 名 =new Array( ); 

例如 ， 定 义 一 个 名 为 myCars 的 数组 对 象 ， 具 体 代码 如 下 : 

Var myCars=new Array(); // 创 建 数组 myCcars 

myCars[0]="Ssaab"; 

myCars [1]="Volvo"; 

myCars[2]="BMW"; 


第 二 种 : 简洁 方式 ， 具 体格 式 如 下 : 
var 数组 名 =new Array( n ) 7 
例如 ， 定 义 一 个 名 为 myCars 的 数组 对 象 ， 具 体 代 码 如 下 : 
Var myCars=new Rrray(nSaabn, "Volvo", "BMW"); 
第 三 种 : 字面 方式 ， 具 体格 式 如 下 : 
var 数组 名 =[ 元 素 ,元素 2, 元 素 3，…] 7 
例如 ， 定 义 一 个 名 为 myCars 的 数组 对 象 ， 具 体 代 码 如 下 : 
Var myCars=["Saab", "Volvo", "BMW"]; 

下 面 创建 一 个 长 度 为 4 的 数组 ， 为 其 添加 数组 对 象 后 ， 使 用 for 循环 语句 枚 举 数组 对 象 。 
【 例 16-21】 《〈 实 例文 件 ，ch16\Chap16.21.html) 创建 数组 对 象 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<script language=Javascript> 

myArray=new Array (4); / /创建 数组 
// 添 加 数组 元 素 
myArray[0]=" 红 楼 梦 "; 
myArray[1]=" 西 游记 "; 
myArray[2]=" 水 浒 传 "; 
myArray[3]=" 三 国 演义 "; 


7| 


7 
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相关 的 代码 实例 请 参考 Chap16.21.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-24 
所 示 。 


图 16-24 创建 数组 对 象 
只 要 构造 了 一 个 数组 ， 就 可 以 使 用 中 括号 “[]”， 通 过 索引 和 位 置 ( 它 也 是 基于 0 的 ) 来 访问 它 的 元 素 。 
数组 元 素 的 下 标 从 零 开始 索引 ， 第 一 个 下 标 为 0， 后 面 依次 加 1。 访 问 数据 的 语法 格式 如 下 
docunent.writelnycarst0]) 
【 例 16-22】 实例 文件 ，ch16\Chap16.22.html) 使 用 中 括号 访问 并 直接 构造 数组 。 


相关 的 代码 实例 请 参考 Chap16.22.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-25 
所 示 。 


—- OO x 


司 CNusersqiangupocP - C| 臣 chsers\qiangu\Do.. x 
文件 (月 ” 编 往 (E) 坦 乔 (V) 性 若 夫 人 A) 工具 (TD) 才 动 (H) 


al,bl, cl 
a2,b2, c2 
a3,b3,c3 


图 16-25 使 用 中 括号 访问 并 直接 构造 数组 


16.6.2 ”访问 数组 


al bl cl 
a2 b2 c2 
a3 b3 c3 
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访问 数组 , 通过 指定 数组 名 以 及 索引 号 码 , 用 户 可 以 访问 数组 中 的 某 个 特定 元 素 。 例如 可 以 访问 myCars 


数组 的 第 一 个 值 ， 具 体 代码 如 下 : 


var name=myCars[0]; 


注意 ; [0] 是 数组 的 第 一 个 元 素 ，[1] 是 数组 的 第 二 个 元 素 。 另外， 还 可 以 修改 数组 中 的 第 一 个 元 素 ， 具 


体 代码 如 下 : 


myCars[0]="Opel"; 


在 一 个 数组 中 可 以 有 不 同 的 对 象 , 几乎 所 有 的 JavaScript 变量 都 可 以 是 对 象 , 甚至 数组 本 身 也 可 以 是 对 


象 ， 
myArray[0]=Date.now; 
myArray [1]=myFunction; 
myArray [2]=myCars; 


【 例 16-23】 实例 文件 ，ch16\Chap16.23.html) 访 问 数组 对 象 。 


<!DOCTYPE html> 

<html> 

<head> 
<title> 访 问 数组 </title> 
</head> 

<body> 

<script> 

var mybooks=new Array (); 
mybooks [0]=" 红 楼 梦 "; 
mybooks [1]=" 水 浒 传 "; 
mybooks [2]=" 西 游记 "; 
mybooks [3]=" 三 国 演义 "; 
document .write (mybooks); 
</script> 

</body> 

</html> 


// 页 面 输出 数组 


函数 也 可 以 是 对 象 。 下 面 创建 一 个 数组 ， 其 中 包括 对 象 元 素 、 函 数 与 数组 ， 具 体 代码 如 下 : 


相关 的 代码 实例 请 参考 Chap16.23.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-26 


所 示 。 
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ET 
司 CiucerswianguDoc DC | 司 广 Bea 

文 伯 有 ”六 (| 二 VI 收 太 夫 A) I 上 mH 
红楼 梦 , 水 浒 传 , 西游 记 , 三 国 演义 


16-26 ”访问 数组 对 象 


6.3 ”数组 属性 
数组 对 象 的 属性 有 3 个 ， 常 用 属性 是 length 属性 和 prototype 属性 ， 如 表 16-11 所 示 。 
表 16-11 数组 对 象 的 属性 及 描述 


属 性 描述 
constructor 返回 创建 数组 对 象 的 原型 函数 
length 设置 或 返回 数组 元 素 的 个 数 
prototype 允许 你 向 数组 对 象 添加 属性 或 方法 


下 面 详细 介绍 prototype 属性 ， 该 属性 是 所 有 JavaScript 对 象 所 共有 的 属性 ， 让 用 户 向 数组 对 象 中 添加 


属性 和 方法 。 当 构建 一 个 属性 时 ， 所 有 的 数组 将 被 设置 属性 ， 它 是 默认 值 ， 在 构建 一 个 方法 时 ， 所 有 的 数 
组 都 可 以 使 用 该 方法 。 其 语法 格式 为 : 
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Array.prototype.name=value。 


注意 : Array.prototype 不 能 单独 引用 数组 ，Array() 对 象 可 以 。 
下 面 创建 一 个 新 的 数组 ， 将 数组 值 转 为 大 写 。 
【 例 16-24】 实例 文件 ，ch16\Chap16.24.html》prototype 属性 的 应 用 。 


<!DocTYPE html> 
<html> 
<head> 
<title>prototype 属性 的 使 用 </title> 
</head> 
<body> 
<p id="demo"> 创 建 一 个 新 的 数组 ,将 数组 值 转 为 大 写 </p> 
<button onclick="myFunction() "> 获取 结果 </button> 
<script> 
Array.prototype.myUcase=function() // 给 Array 的 原型 添加 myUcase 方法 
{ 

for (i=0;i<this.length;i++) 

this[i]=this[i] .toUpperCase (); 

证 


function myFunction() 
{ 
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
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fruits.myUcase (); 
var x=document .getElementById ("demo"); 
x.innerHTML=fruits; 

} 

</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.24.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-27 
所 示 。 


一 x 
司 cuseswiangwpoc 记忆 | 大 protoype 夺 人 的 信用 
文 # 昌 ”和 台 晶 ， 直 看 M 站 家 (A】 工具 Mm 大 动 H) 


创建 一 个 新 的 数组 ， 将 数组 值 转 为 大 写 
菊 取 结果 


图 16-27 prototype 属性 的 应 用 
单 击 “获取 结果 ”按钮 ， 即 可 在 浏览 器 窗口 中 显示 符合 条 件 的 结果 信息 ， 如 图 16-28 所 示 。 


- OO x 
司 GWusersqiangu\Doc ~ 吉大 prototype 必 性 的 使 月 x 
文件 四。 生日 。 查看。 如 (A 工具 Tm) WAH) 


BANANA, ORANGE, APPLE, MANGO 


[mm] 
图 16-28 ”获取 符合 条 件 的 结果 信息 


16.6.4 ”数组 长 度 


使 用 数组 属性 中 的 length 属性 可 以 计算 数组 长 度 ， 该 属性 的 作用 是 指定 数组 中 元 素数 量 的 非 从 零 开始 
的 整数 ， 当 将 新 元 素 添加 到 数组 时 ， 此 属性 会 自动 更 新 。 其 语法 格式 为 : 

my_array.length 

下 面 创建 一 个 新 的 数组 ， 并 返回 数组 元 素 的 个 数 ， 即 数组 长 度 。 

【 例 16-25】 实例 文件 ，ch16\Chap16.25.html》 获 取 数 组 的 长 度 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 获 取 数 组 长 度 </title> 
</head> 
<body> 
<p id="demo"> 创 建 一 个 数组 ,并 显示 数组 元 素 个 数 。</p> 
<button onclick="myFunction() "> 获取 长 度 </button> 
<script> 
function myFunction () 
var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
var x=document .getElementById ("demo"); 
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x.innerHTML=fruits.1length; // 获 取 数 组 的 长 度 
</script> 
</body> 


相关 的 代码 实例 请 参考 Chap16.25 html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-29 
所 示 。 


oo x 
|¢ OEE 
文 站” 短 达 (EF) 吉 看 V) 次 训 夫 A) 工具 TT) 帮 肥 [H) 


创建 一 个 数组 ， 并 显示 数组 元 素 个 歼 。 
EI 


图 16-29 ”获取 数组 的 长 度 
单 击 “ 获 取 结 果 ” 按 钮 ， 即 可 在 浏览 器 窗口 中 显示 符合 条 件 的 结果 信息 ， 如 图 16-30 所 示 。 


o x 
(@ dp EC 一 一 
EA 


16-30 ”显示 符合 条 件 的 结果 


16.7 ”数组 方法 


在 JavaScript 当中 ， 数 据 对 象 的 方法 有 25 种 ， 常 用 的 方法 有 连接 方法 concat、 分 隔 方法 join、 追 加 方 
法 push、 倒 转 方法 reverse、 切 片 方法 slice 等 ， 如 表 16-12 所 示 。 


表 16-12 数组 对 象 的 方法 及 描述 


连接 两 个 或 更 多 的 数组 ， 并 返回 结果 
从 数组 的 指定 位 置 复制 元 素 到 数组 的 另 一 个 指定 位 置 中 
检测 数值 元 素 的 每 个 元 素 是 否 都 符合 条 件 


every0 

fil0 使 用 一 个 固定 值 来 填充 数组 

filter0 检测 数值 元 素 ， 并 返回 符合 条 件 所 有 元 素 的 数组 
find0 返回 符合 传 入 测试 〈 函 数 ) 条 件 的 数组 元 素 
findIndexO 返回 符合 传 入 测试 〈 函 数 ) 条 件 的 数组 元 素 索引 
forEachO) 数组 每 个 元 素 都 执行 一 次 回调 函数 

indexOf0) 搜索 数组 中 的 元 素 ， 并 返回 它 所 在 的 位 置 
join0 把 数组 的 所 有 元 素 放 入 一 个 字符 串 
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续 表 
方 法 描 述 
lastIndexOfO 返回 一 个 指定 的 字符 串 值 最 后 出 现 的 位 置 ， 在 一 个 字符 串 中 的 指定 位 置 从 后 向 前 搜索 
mapO 通过 指定 函数 处 理 数组 的 每 个 元 素 ， 并 返回 处 理 后 的 数组 
pop0 删除 数组 的 最 后 一 个 元 素 并 返回 删除 的 元 素 
pushO 向 数组 的 末尾 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
reduce0 将 数组 元 素 计算 为 一 个 值 〈( 从 左 到 右 ) 
reduceRight0 将 数组 元 素 计算 为 一 个 值 (从 右 到 左 7 
reverse() 反 转 数组 的 元 素 顺序 
shift0 删除 并 返回 数组 的 第 一 个 元 素 
slice0) 选取 数组 的 一 部 分 ， 并 返回 一 个 新 数组 
some0 检测 数组 元 素 中 是 否 有 元 素 符合 指定 条 件 
sort0 对 数组 的 元 素 进行 排序 
splice0) 从 数组 中 添加 或 删除 元 素 
toString0 把 数组 转换 为 字符 串 ， 并 返回 结果 
unshiftO 向 数组 的 开头 添加 一 个 或 更 多 元 素 ， 并 返回 新 的 长 度 
valueOfO 返回 数组 对 象 的 原始 值 
这 些 方 法 主要 用 于 数组 对 象 的 操作 ， 下 面 详细 介绍 常用 的 数组 对 象 方法 的 使 用 。 
16.7.1 ”连接 两 个 或 更 多 的 数组 
使 用 concat0 方 法 可 以 连接 两 个 或 多 个 数组 。 该 方法 不 会 改变 现 有 的 数组 ， 而 仅仅 会 返回 被 连接 数组 的 
一 个 副本 。 语 法 格式 如 下 : 
arrayOobject.concat (arrayl,array2, ...,arrayN) 
其 中 ，arrayN 是 必 选 项 ， 该 参数 可 以 是 具体 的 值 ， 也 可 以 是 数组 对 象 ， 可 以 是 任意 多 个 。 
【 例 16-26】 (实例 文件 : ch16\Chap16.26.html) 使 用 concat() 方 法 连接 三 个 数组 ,并 返回 链接 后 的 结果 。 


< <!DOCTYPE html> 
<html> 
<head> 


<title> 连 接 数 组 </title> 


</head> 
<body> 
<script> 


var boy = [" 张 洪波 "，" 张 文 轩 "，" 赵 天 阳 "] 
var girl = [" 刘 一 诺 "，" 赵 子 涵 "，" 闫 露 露 "]; 
var other = [" 刘 天 意 "，" 狄 家 旭 "]; 

var children = boy.concat (girl,other); 
document .write (children); 

</script> 


// 连 接 数 组 girl,other 
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</body> 
</html> 


相关 的 代码 实例 请 参考 Chap16.26.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-31 
所 示 。 


司 cWsersqarownocP - 0 | 人 Bama 
文 #D。 辆 日 ” 考 看 W。 改 硬 夫 内 工具 大 动 H 
张 洪 疲 , 张 文 轩 , 赵 天 阳 , 刘 一 话 , 赵 子 福 , 玖 露 露 , 刘 天 意 , 狄 家 旭 


16-31 连接 三 个 数组 并 返回 链接 后 的 结果 


16.7.2 ”将 数组 元 素 连 接 为 字符 串 
使 用 join0 方 法 可 以 把 数组 中 的 所 有 元 素 放 入 一 个 字符 串 。 语 法 格式 如 下 : 


arrayobject.join(separator) 

其 中 ，separator 为 可 选项 ， 用 于 指定 要 使 用 的 分 隔 符 ， 如 果 省 略 该 参数 ， 则 使 用 逗号 作为 分 隔 符 。 
【 例 16-27】 实例 文件 ，ch16\Chap16.27.html) 使 用 join() 方 法 将 数组 元 素 连 接 为 字符 串 。 
<!DOCTYPE html> 
<html> 
<body> 
<script type="text/javascript"> 
var arr = new Array (3); 

" 章 果 " 


arr[0] = 

arr[1] = " 桥 子 " 

arr[2] = "香蕉 " 

document .write (arr.join(", ")); // 把 数组 转换 为 字符 串 , 以 逗号 分 隔 


document .write ("<br />"); 
document .write (arr.join(".")); 


</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap16.27.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-32 
所 示 。 


- oO x 
© 全 | CUsers\qiangd\Doc P ~ 5 | BCAUserdqiangi\Do. 
文 作 站” 志 E) 豆 看 V) 站 三 (A| 工具 站 帮 肝 (| 


革 果 ,根子 ,得 基 
苹果 桶 了 . 香 基 


图 16-32 ”将 数组 元 素 连 接 为 字符 串 


16.7.3” 移 除数 组 中 最 后 一 个 元 素 
使 用 pop0 方 法 可 以 移 除 并 返回 数组 中 最 后 一 个 元 素 。 语 法 格式 如 下 : 
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arrayobject..popt) 


提示 : pop0 方 法 将 移 除 arayObject 的 最 后 一 个 元 素 ， 把 数组 长 度 减 1， 并 且 返 回 它 移 除 的 元 素 的 值 。 
如 果 数 组 已 经 为 空 ， 则 pop0 不 改变 数组 ， 并 返回 undefined 值 。 
【 例 16-28】 实例 文件 ，ch16\Chap16.28.html) 使 用 pop () 方 法 移 除 数组 最 后 一 个 元 素 。 


<!DocTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

var fruits = [" 香 燕 "，" 橘 子 "， "苹果 "， "火龙 果 "] 7 
document -write ("数组 中 原 有 元 素 : "+ fruits) 
document .write ("<br />") 
document .write ("被 移 除 的 元 素 : "+ fruits.pop()) 
document .write ("<br />") 

document .write (" 移 除 元 素 后 的 数组 元 素 : "+ fruits) 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.28.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-33 
所 示 。 


> 口 x 
@ 司 cAUsers\qiangu\Doc PD ™ © | @ CAUsers\qiangu\Do.. 
文件 月 。 久久 (E) 重 看 (V) 收藏 交 (A) 工具 0) 钴 动 (H) 
| 数组 中 原 有 元 素 ， 香 燕 , 桶 子 ,苹果 ,火龙 果 


被 称 除 的 元 素 ， 火龙 果 
移 除 元 素 后 的 数组 元 素 ， 香 基 , 橘子 , 革 果 


图 16-33” 移 除数 组 中 最 后 一 个 元 素 


16.7.4 ”将 指定 的 数值 添加 到 数组 中 
使 用 push0 方 法 可 向 数组 的 末尾 添加 一 个 或 多 个 元 素 ， 并 返回 新 的 长 度 。 语 法 格式 如 下 : 下 


arrayobject.push (newelement1, newelement2, ..., newelementN) 
其 中 ，arrayObject 为 必 选 项 ， 该 参数 为 数组 对 象 。newelementl 为 可 选项 ， 表 示 添 加 到 数组 中 的 元 素 。 
提示 : push0 方 法 可 把 它 的 参数 顺序 添加 到 arrayObject 的 尾部 。 它 直接 修改 arrayObject， 而 不 是 创建 
一 个 新 的 数组 。push() 方 法 和 pop() 方 法 使 用 数组 提供 的 先进 后 出 栈 的 功能 。 
【 例 16-29】 (实例 文件 ， ch16\Chap16.29.html) 使 用 push () 方 法 将 指定 数值 添加 到 数组 中 。 


<!DocTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

var fruits = [" 香 燕 "，" 桶 子 "， "苹果 "， "火龙 果 "]; 

document .write(" 数 组 中 原 有 元 素 : "+ fruits) 
document-wFite("<br />") 

document .write ("添加 元 素 后 数组 的 长 度 : "+ fruits. push(" 香 梨 ")) 
document .write ("<br />") 

document .write ("添加 元 素 后 的 数组 元 素 : "+ fruits) 
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</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap16.29.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-34 


所 示 。 
一 [aa x 
导 cAUeers\qiangu\Doe 人 DC|| 姜 CNUsers\iongu\De.. 
文件 (月 ”篇 强 E) 。 豆 看 (V) 收 芭 夫 {(A) 工具 (T) 帮助 (H) 
数组 中 原 有 元 素 : 香 芒 ， 捕 了 苹果 ,火龙 果 
渗 加 元 素 后 数组 的 长 
祷 加 多 梨 忆 的 圳 组 元 系 ， 兰 熙 ,橘子 , 蕴 果 ,火龙 果 , 舌 条 
图 16-34 ”将 指定 数值 添加 到 数组 中 
-7.5 ” 反 序 排列 数组 中 的 元 素 


16 


使 用 reverse( 方 法 可 以 颠倒 数组 中 元 素 的 顺序 。 语 法 格式 如 下 ， 
arrayobject.reverse() 


提示 : 该 方法 会 改变 原来 的 数组 ， 而 不 会 创建 新 的 数组 。 
【 例 16-30】 实例 文件 ，ch16\Chap16.30.html) 使 用 reverse () 方 法 颠倒 数组 中 的 元 素 顺序 。 


<!DOCTYPE html> 
<html> 

<body> 

<script type="text/javascript"> 

var fruits = [" 香 茹 "，" 桥 子 "， "苹果 "， "火龙 果 "]; 
document .write ("数组 原 有 元 素 的 顺序 : "+fruits + "<br />") 
document .write ("其 倒数 组 中 的 元 素 顺序 : "+fruits.reverse()) 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.30.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-35 


所 示 。 
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= 河 奖 
图 CNusersqiangupocP - CE 是 cNuUsersvqiangu\Do_ x 
文件 由 久久 (E) 得 看 (V) 收藏 夫 A) 工具 (帮助 (H] 


数组 后 有 元 对 的 顺序 ， 香 若 , 橘子 ,苹果 , 火龙 果 
着 倒数 组 中 的 元 系 顺 序 ， 火 龙 果 , 苹果 , 橘子, 香 莱 


图 16-35 反 序 排列 数组 中 的 元 素 


.7.6 ”删除 数组 中 的 第 一 个 元 素 


使 用 shifti0 方 法 可 以 把 数组 的 第 一 个 元 素 从 其 中 删除 ， 并 返回 第 一 个 元 素 的 值 。 语 法 格式 如 下 : 
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arrayObject .shift () 
其 中 ，arrayObject 为 必 选 项 ， 是 数组 对 象 。 

提示 : 如 果 数 组 是 空 的 ， 那 么 shift0 方 法 将 不 进行 任何 操作 ， 返 回 undefined 值 。 请 注意 ， 该 方法 不 创 
建新 数组 ， 而 是 直接 修改 原 有 的 arrayObject。 

【 例 16-31】 (实例 文件 ，chl6\Chap16.31.html) 使 用 shift 0 方法 删除 数组 中 的 第 一 个 元 素 。 


<!DocTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

var fruits = [" 香 藉 "，" 桶 子 "， "苹果 "， "火龙 果 "]; 
document .write(" 原 有 数组 元 素 为 : "+ fruits) 
document .wite("<br />") 

document .write ("删除 数组 中 的 第 一 个 元 素 为 : "+ fruits-shift()) 
document .write ("<br />") 

document .write ("删除 元 素 后 的 数组 为 : "+ fruits) 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.31.html 文件 ， 然 后 双击 该 文件 ， 在 下 浏览 器 中 运行 的 结果 如 图 16-36 
所 示 。 


@ CUsers\qiangu\Doc PD - © | EC\Users\qiangu\Do.. x 
文件 肯 。 六 噬 E) 查看 收 硬 实 (A) 工具 (帮助 (H) 
原 有 数组 元 素 为 ， 香 若 , 橘子 , 苹果 , 火龙 果 


其 除数 组 中 的 第 一 个 元 系 为 ， 香 基 
出 除 元 素 后 的 数组 为 ， 柱 季 , 革 果 ,火龙 果 


图 16-36 删除 数组 中 的 第 一 个 元 素 


16.7.7 ”获取 数组 中 的 一 部 分 数据 
使 用 slice0 方 法 可 从 已 有 的 数组 中 返 


arrayobject.slice (start,end) 
其 中 ，arrayObject 为 必 选 项 ， 为 数组 对 象 ，start 为 必 选 项 ， 表 示 开 始 元 素 的 位 置 ， 是 从 0 开始 计算 的 索引 。 
end 为 可 选项 ， 表 示 结 束 元 素 的 位 置 ， 也 是 从 0 开始 计算 的 索引 。 

【 例 16-32】 实例 文件 ，ch16\Chap16.32.html) 使 用 slice 0 方法 获取 数据 中 的 一 部 分 数据 。 


<!DocTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 

var fruits = [" 香 芳 "，" 橘 子 "， "苹果 "， "火龙 果 "]; 
document .write (" 原 有 数组 元 素 : "+ fruits) 

document .write ("<br />") 

document .write ("获取 的 部 分 数组 元 素 : "+ fruits.slice(1,3)) 
document .write ("<br />") 


选 定 的 元 素 。 语 法 格式 如 下 : 


331 


HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 信 版 ) 
NA 


Sb 


document -write ("获取 部 分 元 素 后 的 数据 : "+ fruits) 

</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap16.32.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-37 
所 示 ， 可 以 看 出 获取 部 分 数组 元 素 后 的 数组 前 后 是 不 变 的 。 


@ 司 CAUsers\qiangu\Doc PD - © | 戎 CAUsers\qiangu\Do.. x 
文 (。 六 弓 (E) 可 看 (V) 次 之 夫 (A) 工具 (T) 帮 动 (H) 


原 有 数组 元 素 ， 香 莱 , 橘子 ， 火龙 果 
获取 的 部 分 数组 元 素 ， 桶 子 , 蔷 : 
获取 部 分 元 素 后 的 数据 ， 于 入 入 苹果 , 火龙 果 


16-37 ”获取 数组 中 的 一 部 分 数据 


16.7.8 ”对 数组 中 的 元 素 进行 排序 


使 用 sort() 方 法 可 以 对 数组 的 元 素 进行 排序 ， 排 序 顺序 可 以 是 字母 或 数字 ， 并 按 升序 或 降序 排序 ， 默 认 
排序 顺序 为 按 字母 升序 。 语 法 格式 如 下 : 

arrayObject.sort (sortby) 
其 中 ，arrayObject 为 必 选 项 ， 为 数组 对 象 。sortby 为 可 选项 ， 用 来 确定 元 素 顺序 的 函数 的 名 称 ， 如 果 这 个 
参数 被 省 略 ， 那 么 元 素 将 按照 ASCII 字符 顺序 进行 升序 排序 。 

【 例 16-33】 (实例 文件 ，ch16\Chap16.33.html) 新 建 数组 x 并 赋值 2.9.8.10.12.7， 使 用 sort 方法 排序 数 
组 ， 并 输出 x 数组 到 页 面 。 


<!DOCTYPE html> 


<html> 

<head> 

<title> 数 组 排序 </title> 

<script type="text/javascript"> 

var x=new Array(2,9,8,10,12,7); /1 创建 数组 

document .write ("排序 前 数组 : "+x.join(",")+"<p>"); // 输 出 数组 元 素 
x.sort(); // 按 字符 升序 排列 数组 
document .write ("没有 使 用 比较 函数 排序 后 数组 : "+x.join(",")+"<p>"); // 输 出 排序 后 数组 
x.sort (asc); // 有 上 比较 函数 的 升序 排列 
/* 升 序 比较 函数 */ 


function asc(a,b) 
{ 

return a-b; 
E 


document .write ("排序 升序 后 数组 :"+x.join(",")+"<p>"); // 输 出 排序 后 数组 
x.sort (des); // 有 比较 函数 的 降序 排列 
人/ 降序 比较 函数 */ 


function des (a,b) 
. 

return b-a; 
1 
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document .write ("排序 降序 后 数组 : "+x.join(",")); // 输 出 排序 后 数组 
</script> 

</head> 

<body> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap16.33.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-38 
所 示 。 


~ 庆功 
同 cuseswimgwpocP - 0 大 a 地 

文件 久生) 至 看 V) 站 吉 (A】 工具 帮 动 H) 

排序 前 数组 :2, 9, 6, 10, 12, 7 

没有 使 用 比较 函数 排序 后 数组 :10, 12, 2, 7, 8,9 

排序 升序 后 数组 : 

排序 降序 后 数组 : 


9,10,12 


10,9,8,7,2 


图 16-38 ”排序 数组 对 象 


注意 : 当 数 字 是 按 字母 顺序 排列 时 ，"40" 将 排 在 "5" 前 面 。 使 用 数字 排序 ， 用 户 必 须 通 过 一 个 函数 作为 
参数 来 调用 ， 函 数 指定 数字 是 按照 升序 还 是 降序 排列 ， 这 种 方法 会 改变 原始 数组 ! 


16.7.9 将 数组 转换 成 字符 串 


按照 显示 方式 的 不 同 ， 字 符 串 可 以 分 为 字符 串 与 本 地 字符 串 ， 使 用 tostring0 方 法 可 把 数组 转换 为 字符 

串 ， 并 返回 结果 。 语 法 格式 如 下 : 
arrayobject.tostring () 
使 用 toLocaleString() 方 法 可 以 把 数组 转换 为 本 地 的 字符 串 。 语 法 格式 如 下 : 
arrayobject.toLocalestring() 


提示 : 首先 调用 每 个 数组 元 素 的 toLocaleString() 方 法 ， 然 后 使 用 地 区 特定 的 分 隔 符 把 生成 的 字符 串 连 
接 起 来 ， 形 成 一 个 字符 囊 。 
【 例 16-34】 实例 文件 ，ch16\Chap16.34.html) 将 数组 转换 成 字符 串 与 本 地 字符 串 。 


<!DocTYPE html> 

<html> 

<body> 

<script type="text/javascript"> 
var arr = new Rrray(4) 


arr[0] = " 香 燕 " 
arr[1] = "橘子 " 
arr[2] = "苹果 " 
arr[3] = "火龙 果 " 


document .write ("字符 串 : "tarr.tostring()) 

document .write ("<br />") 

document .write ("本 地 字符 串 : "tarr.toLocalestring()) 
</script> 

</body> 

</html> 
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相关 的 代码 实例 请 参考 Chap16.34.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-39 
所 示 。 


- DO x 
@ 司 CUsers\qiangu\Doc P - © | 大 CNusersqiangu 
文件 (有 入 儿 (EF) 查看 V) 收藏 交 (A) 工具 (T) 。 帮助 (H) 
字符 串 ， 香菇 , 橘子 ,苹果 , 火龙 果 


本 地 字符 串 ， 香 若 ， 橘 子 ， 苹 果 ， 火 龙 果 


16-39 ”将 数组 转换 为 字符 串 


16.8 ”经典 案例 一 一 制作 二 级 关联 菜单 


许多 编程 语言 中 都 提供 定义 和 使 用 二 维 或 多 维 数组 的 功能 。JavaScript 通过 Array 对 象 创建 的 数组 都 是 
一 维 的 ， 但 是 可 以 通过 在 数组 元 素 中 使 用 数组 来 实现 二 维 数组 。 下 面 制作 一 个 动态 下 拉 列 表 。 
【 例 16-35】 (实例 文件 ， ch16\Chap16.35.html) 制作 二 级 关联 菜单 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 二 级 关联 莱 单 </title> 
</head> 
<script language=javascript> 
// 定 义 一 个 二 维 数组 aArray, 用 于 存放 城市 名 称 

var aCity=new Array(); 
acity[0]=new Array(); 
acCity[1]=new Array(); 
acCity[2]=new Array(); 
aCity[3]=new Array(); 
// 赋 值 ,每 个 省 份 的 城市 存放 于 数组 的 一 行 
acity[0] [0]="-- 请 选择 --"; 
aCity[1] [0]="-- 请 选择 --"; 
acity[1] [1]=" 郑 州 市 "; 
acity[1] [2]=" 洛 阳 市 "; 
acity[1] [3]=" 开 封 市 "; 
acity[1] [4]=" 南 阳 市 "; 
acity[1] [5]=" 周 口 市 "; 
acity[2] [0]="-- 请 选择 --"; 
acity[2] [1]=" 石 家 庄市 "7 
acity[2] [2]=" 素 皇 岛 市 "; 
acity[2] [3]=" 张 家 口 市 "; 
acCity[3] [0]="-- 请 选择 --"; 
acity[3] [1]=" 杭 州 市 "7 
acity[3] [2]=" 嘉 兴 市 "7 
acity[3] [3]=" 温 州 市 "7 
function Changecity() 
{ 

var i,iProvinceIndex; 

iProvinceIndex=document .frm.optProvince.selectedIndex; 
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相关 的 代码 实例 请 参考 Chap16.35.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 16-40 
所 示 。 


图 16-40 动态 下 拉 列 表 显示 效果 
单 击 省 份 右 侧 的 “请 选择 ”下 拉 按 钮 ， 在 弹出 的 下 拉 列 表 中 可 以 选择 省 份 ， 如 图 16-41 所 示 。 


图 16-41 选择 需要 的 省 份 


3 
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省 份 选择 完毕 后 ， 单 击 城市 右 侧 的 “请 选择 ”下 拉 按 钮 ， 即 可 在 弹出 的 下 拉 列 表 中 选择 城市 信息 ， 如 
图 16-42 所 示 。 


同 cueeraqarespocP ~ © | Ge Tn 
XH MEE SE Wi) IRM HAM 


选择 省 份 及 城市 
省 愉 ， [ 吏 商 音 ~] 


图 16-42 ”选择 需要 的 城市 


16.9 “就业 面试 技巧 与 解析 


16.9.1 ”面试 技巧 与 解析 (一) 


面试 官 : 朋友 对 你 的 评价 ， 你 知道 吗 ? 
应 聘 者 : 我 的 朋友 都 说 我 是 一 个 可 以 信赖 的 人 。 因 为 ， 我 答应 别人 的 事情 ， 就 一 定 会 做 到 。 如 果 我 做 
不 到 ， 我 就 不 会 轻易 许诺 。 


16.9.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 如 果 通 过 这 次 面试 我 们 单位 录用 了 你 ， 但 工作 一 段 时 间 却 发 现 你 根本 不 适合 这 个 职位 ， 你 怎 
么 办 ? 

应 聘 者 : 一 段 时 间 发 现 工作 不 适合 我 ， 我 会 从 我 个 人 身上 找 原因 ， 不 断 学 习 ， 虚 心 向 领导 和 同事 学 习 
业务 知识 和 处 事 经 验 ， 了 解 这 个 职业 的 精神 内 涵 和 职业 要 求 ， 力 争 胜任 这 份 工作 。 
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二 学 习 指引 


当 在 JavaScript 中 需要 实现 较为 复杂 的 系统 功能 时 , 就 需要 使 用 函数 功能 了 。 函数 是 进行 模块 化 程序 设 
计 的 基础 ， 通 过 函数 的 使 用 可 以 提高 程序 的 可 读 性 与 易 维护 性 。 本 章 将 详细 介绍 JavaScript 的 函数 与 闭 包 ， 
主要 内 容 包括 定义 函数 、 函 数 的 调用 、 常 用 内 置 函 数 、 特 殊 函数 以 及 JavaScript 的 闭 包 等 。 


二 ”重点 导读 


。 掌 握 定 义 函 数 的 方法 与 技巧 。 

。 掌 握 调 用 函数 的 方法 与 技巧 。 

。 掌 握 常 用 内 置 函 数 的 使 用 方法 。 

。 掌 握 JavaScript 中 特殊 函数 的 应 用 。 
。 掌 握 JavaScript 闭 包 的 使 用 方法 。 

。 掌 握 回调 函数 的 设计 模式 。 


17.1 函数 是 什么 


函数 是 由 事件 驱动 的 或 者 当 它 被 调用 时 执行 的 可 重复 使 用 的 代码 块 ， 是 实现 一 个 特殊 功能 和 作用 的 程 
序 接口 ， 可 以 被 当 作 一 个 整体 来 引用 和 执行 。 在 JavaScript 中 ， 函 数 的 定义 通常 由 4 部 分 组 成 : 关键 字 、 
函数 名 、 参 数列 表 和 函数 内 部 实现 语句 ， 具 体 语法 格式 如 下 ;: 


function functionname () 


执行 代码 
} 
当 调 用 该 函数 时 ， 会 执行 函数 内 的 代码 。 同 时 ， 可 以 在 某 事件 发 生 时 直接 调用 函数 〈 例 如 当 用 户 单 击 
按钮 时 )， 并 且 可 由 JavaScript 在 任何 位 置 进行 调用 。 
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注意 : JavaScript 对 大 小 写 敏感 ， 关 键 词 function 必须 是 小 写 的 ， 并 且 必 须 以 与 函数 名 称 相同 的 大 小 写 
来 调用 函数 。 

例如 : 定义 一 个 函数 ， 在 网 页 中 显示 问候 语 。 

【 例 17-1】 〈 实 例文 件 ，ch17\Chap17.1.html) 定义 一 个 函数 ， 在 网 页 中 显示 问候 语 。 


<!DocTYPE html> 
<html> 
<head> 
<script> 
function myFunction() 
Li 
alert ("Hello World!"); // 在 页 面 中 显示 Hello World! 
} 
</script> 
</head> 
<body> 
<button onclick="myFunction() "> 显示 结果 </button> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap17.1.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-1 
所 示 。 


- D x 
外 CGNueereqiangu\poc 甩 -上 | 刁 CUsers\qiong 

文人 短 顷 E) 二 看 MI 多 右 A) 工具 可 了 (H) 

号 示范 果 


图 17-1 定义 一 个 函数 
单 击 “ 显 示 结 果 ” 按 钮 ， 即 可 弹出 一 个 信息 提示 框 ， 在 提示 框 中 显示 问候 语 ， 如 图 17-2 所 示 。 


TN 


A Helo wordl 


EE 
17-2 显示 问候 运行 结果 


提示 : 如 果 函 数 中 引用 的 外 部 函数 较 多 或 函数 的 功能 很 复杂 ， 将 因 函 数 代 码 过 长 而 降低 脚本 代码 的 可 
读 性 。 因此， 在 编写 函数 时 ， 应 尽量 降低 代码 的 复杂 度 及 难度 ， 保 持 函 数 功能 的 单一 性 ， 简 化 程序 设计 ， 
以 使 脚本 代码 结构 清晰 、 简 单 易 懂 。 


17.2 ”定义 函数 


使 用 函数 前 ， 必 须 先 定义 函数 ，JavaScript 使 用 关键 字 function 定义 函数 ， 除 此 之 外 ， 函 数 可 以 通过 声 
明和 一 个 表达 式 定义 。 
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17.2.1 ”声明 式 函 数 定义 


提示 : 分 号 用 来 分 隔 可 执行 JavaScript 语句 ， 由 于 函数 声明 不 是 一 个 可 执行 语句 ， 所 以 不 以 分 号 结束 。 
使 用 函数 前 ， 必 须 先 定义 函数 。 


function functionName (parameters) { 
执行 的 代码 
上 
函数 声明 后 不 会 立即 执行 ， 会 在 用 户 需要 的 时 候 调用 。 
【 例 17-2】 实例 文件 ，ch17\Chap17.2.html〉 声 明 式 函数 定义 的 应 用 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 声 明 式 函数 定义 </title> 
</head> 
<body> 
<p> 本 例 调用 的 函数 会 执行 一 个 计算 ,然后 返回 结果 : </p> 
<p id="demo"></p> 
<script> 
function myFunction(a,b){ 
return a*b; 
} 
document .getElementById ("demo") .innerHTML=myFunction (5, 6); 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap17.2.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-3 
所 示 。 


- oO x 
司 GUsers\qiargDoc PD -5 | @ FrBRENEX 

文件 作坊 有 6) 去 看 MV) 收 大 失 和) 工具。 种 凤 (H 

本 例 调用 的 函数 会 执行 一 个 计算 ， 然 后 返回 结果 : 

30 


图 17-3 ”声明 式 函 数 定义 的 应 用 结果 


17.2.2 ”函数 表达 式 定义 
JavaScript 函数 可 以 通过 一 个 表达 式 定义 ， 其 中 ， 函 数 表达 式 可 以 存储 在 变量 中 ， 具 体 代码 如 下 ; 


var x = function (a, b) {return a + b}; 


【 例 17-3】 〈 实 例文 件 ，chl7\Chap17.3.html) 函数 表达 式 定义 的 应 用 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 函 数 表 达 式 定义 </title> 
</head> 

<body> 


<p> 函 数 存储 在 变量 后 ,变量 可 作为 函数 使 用 : </p> 
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<p id="demo"></p> 

<script> 

var x = function (a, b) {return a * bj}; 

document .getElementById ("demo") .innerHTML = x(5,6); 


</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap17.3.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-4 
所 示 。 


区 x 
辣 CWserqionouDor D ~ 0 | tt 
文件 (站 注 沪 (EF) 可 看 (V) 收 宫 夫 人 A) 工具 TT) 者 芭 (H) 
函数 存 信 在 变量 后 ， 变 重 可 作为 函数 使用 ， 
30 


图 17-4 ”函数 表达 式 定义 的 应 用 结果 


17.2.3 ”函数 构造 器 定义 
JavaScript 内 置 的 函数 构造 器 为 (Function0)， 通 过 该 构造 器 可 以 进行 函数 定义 ， 具 体 代码 如 下 ;: 


Var myFunction = new Function("a", "b", "return a # b"); 
【 例 17-4】〔 实 例文 件 ，ch17\Chap17.4.html》 函 数 构 造 器 定义 的 应 用 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 函 数 构造 器 定义 </title> 

</head> 

<body> 

<p>Javascrip 内 置 函数 构造 器 定义 </p> 

<p id="demo"></p> 

<script> 

var myFunction = new Function("a", "b", "return a * b"); 
document .getElementById ("demo") .innerHTML = myFunction(5, 6); 


</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap17.4.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-5 
所 示 。 


站 CAUsers\qiangu\Doc ”0 | 感 EE 构造 器 定义 
立体 多 和 (EF) 喜 看 (V) 收 基 寺 A) 工具 (T 者 且 (H] 


JavaScrip 内 置 函 数 构 造 器 定义 
30 


17-5 ”函数 构造 器 定义 的 应 用 结果 
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在 JavaScript 中 ， 很 多 时 候 ， 用 户 不 必 使 用 构造 函数 ， 需 要 避免 使 用 new 关键 字 。 因 此 上 面 的 函数 定 
义 实例 可 以 修改 为 如 下 代码 : 
【 例 17-5】〔 实 例文 件 ，ch17Chap17.5.html》 函 数 构 造 器 定义 的 应 用 。 


<!DOCTYPE html> 
<html> 

<head> 

<title> 函 数 构造 器 定义 </title> 

</head> 

<body> 

<p id="demo"></p> 

<script> 

var myFunction = function (a, b) {return a * bl 

document .getElementById ("demo") .innerHTML = myFunction(5, 6); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap17.5.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-6 
所 示 。 


- OO x 
刁 | CAUsers\qiangu\Doc ”0 大 四 toi 强 定义 
文件 (P]。 久 注 (E) 三 看 (V) 收藏 天 (A) 工具 和 帮助 (H) 
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图 17-6 ”函数 构造 器 定义 的 应 用 结果 


17.3 ”函数 的 调用 


定义 函数 的 目的 是 为 了 后 续 的 代码 中 使 用 函数 。 调 用 自己 不 会 执行 ， 必 须 调用 函数 ， 函 数 体内 的 代码 
才 会 执行 。 在 JavaScript 中 调用 函数 的 方法 有 简单 调用 、 在 表达 式 中 调用 、 在 事件 响应 中 调用 等 。 


17.3.1 作为 一 个 函数 调用 


作为 一 个 函数 调用 函数 是 调用 JavaScript 函数 常用 的 方法 ， 但 不 是 良好 的 编程 习惯 ， 因 为 全 局 变量 、 方 
法 或 函数 容易 造成 命名 冲突 的 bug。 
【 例 17-6】 实例 文件 ，ch17\Chap17.6.html》 作 为 一 个 默认 函数 调用 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 作 为 一 个 默认 函数 调用 </title> 
</head> 

<body> 

<p> 
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相关 的 代码 实例 请 参考 Chap17.6.html 文件 ， 然 后 双击 该 文件 ， 在 下 浏览 器 中 运行 的 结果 如 图 17-7 
所 示 。 


i 口 x 
国 csers\qiangu\Doc P -0 | 居 作 为 一作 机 用 


全 局 函数 (myFunction) 返 回 参数 相 乘 的 结果 : 
80 


图 17-7 作为 一 个 默认 函数 调用 


全 局 函数 myFunction 不 属于 任何 对 象 ， 但 是 在 JavaScript 中 它 始终 是 默认 的 全 局 对 象 。 在 HTML 中 默 
认 的 全 局 对 象 是 HTML 页 面 本 身 , 所 以 函数 属于 HTML 页 面 。 在 浏览 器 中 的 页 面 对 象 是 浏览 器 窗口 (window 
对 象 )， 以 上 函数 会 自动 变 为 window 对 象 的 函数 。 因 此 ，myFunction0 和 window.myFunction0 的 作用 是 一 
样 的 。 

【 例 17-7】 (实例 文件 ，ch17\Chap17.7.html) 作为 一 个 函数 显示 调用 。 


相关 的 代码 实例 请 参考 Chap17.7.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-8 


所 示 。 
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- 0O x 
司 CAUsers\qiangu\Doc 只 -上 感 作为 一 个 函数 亩 用 x 
文件 中。 病 启 (E) ”查看 (V) ”收藏 夫 (A】 工具 (T) 帮助 (H) 
全 局 函数 myFunction 0 〇 会 自动 成 为 window 对 象 的 方法 。 


myFunction 0 类 似 于 window. myFunction() 


80 


17-8 程序 运行 结果 


17.3.2 ”将 函数 作为 方法 调用 


在 JavaScript 中 ,用 户 可 以 将 函数 定义 为 对 象 的 方法 ， 从 而 进行 调用 。 例 如 : 创建 一 个 对 象 (myObject)， 
对 象 有 两 个 属性 ， 分 别 是 frstName 和 lastName， 还 有 一 个 方法 是 fullName。 
【 例 17-8】 (实例 文件 ，chl17\Chap17.8.html) 将 函数 作为 方法 调用 返 


<!DocTYPE html> 
<html> 
<head> 
<title> 将 函数 作为 方法 调用 返回 fullName 值 </title> 
</head> 
<body> 
<p>myobject .fullName () 返回 全 名 :</p> 
<p id="demo"></p> 
<script> 
var myobject = { 

firstName:" 刘 ", 

lastName: "天 佑 "， 

fullName: function() { 

return this.firstName + " " + this.lastName; 


fullName 值 。 


由 


} 

// 调 用 对 象 myobject 中 的 fullName 方法 

document .getElementById ("demo") .innerHTML = myObject.fullName();</script> 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap17.8.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-9 
所 示 。 


@ 国 cseraqanguDor P - 避 | 大 af 为 方法 有 
文件 (月 ” 编 穴 (E) 查看 (Y) 牧 芒 夫 (A) 工具 (Tm) 。 帮 动 (H) 


my0bject. fullName () 返 回 全 名 : 
刘 天 个 


图 17-9 将 函数 作为 方法 调用 返回 fullIName 值 
fulIName 方法 是 一 个 函数 ， 函 数 属于 对 象 ，myObject 是 函数 的 所 有 者 ， 当 加 入 this 对 象 后 ，this 的 值 
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为 myObject 对 象 ， 这 里 修改 fulIName 方法 并 返回 this 值 。 


可 


【 例 17-9】 (实例 文件 ，ch17\Chap17.9.html) 将 函数 作为 方法 调用 返回 this 值 。 
<!DOCTYPE html> 
<html> 
<head> 
<title> 将 函数 作为 方法 调用 返回 this 值 </ 上 itle> 
</head> 
<body> 
<p> 在 一 个 对 象 方法 中 , <b>this</b> 的 值 是 对 象 本 身 。</P> 
<p id="demo"></p> 
<script> 
var myobject = { 

firstName:" 刘 ", 

lastName: "天 佑 "， 

fullName: function() { 

return this; 


} 
} 
document .getElementById ("demo") .innerHTML = myObject.fullName (); 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap17.9.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-10 


所 示 。 


= 总 多 
司 cAUsers\qiangu\Doc 只 - C | 大 ff 为 方法 调用 

文体。 六 强 [E) 下 看 (V)。 收藏 实 A)。 工具 CD。 关 色 (HD) 

在 一 个 对 象 方法 中 ，this 的 值 是 对 象 本 身 。 


[object Object] 


17-10 ”将 函数 作为 一 个 方法 调用 返回 this 值 


17.3.3 ”使 用 构造 函数 调用 函数 


如 果 函 数 调用 前 使 用 了 new 关键 字 ， 则 是 调用 了 构造 函数 。 构 造 函数 的 调用 会 创建 一 个 新 的 对 象 ， 新 


对 象 会 继承 构造 函数 的 属性 和 方法 。 
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【 例 17-10】〗】 实例 文件 ，ch17\Chap17.10.html) 使 用 构造 函数 调用 函数 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 使 用 构造 函数 调用 函数 </title> 
</head> 

<body> 

<p> 该 实例 中 ,myFunction 是 函数 构造 函数 :</p> 
<p id="demo"></p> 

<script> 

function myFunction(argl, arg2) { 
this.firstName= argl; 
this.lastName= arg2; 
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var x = new myFunction(" 刘 天 佑 "," 刘 天 要 ") 

document .getElementById ("demo") . innerHTML = x.firstName; 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap17.10.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-11 
所 示 。 


ER 
@ 司 csersiqianeu\por P -| 局 全 和 mEERX 用 四 下 
广 村 日” 因 各 日 ， 达 看 M “三 关内 工具 帮 副 (HH 

该 实例 中 ，myFunction 是 函数 构造 函数 ; 

刘 天 佑 


17-11 使 用 构造 函数 调用 函数 
提示 : 构造 函数 中 this 关键 字 没 有 任何 的 值 ，this 的 值 在 函数 调用 时 实例 化 对 象 (new object) 时 创建 的 。 


17.3.4 ”作为 函数 方法 调用 函数 忆 


区 
在 JavaScript 中 , 函数 是 对 象 , JavaScript 函数 有 它 的 属性 和 方法 , call0 和 apply0 是 预定 义 的 函数 方法 。 

两 个 方法 可 用 于 调用 函数 ， 两 个 方法 的 第 一 个 参数 必须 是 对 象 本 身 。 
【 例 17-11】 〈 实 例文 件 ，ch17\Chap17.11.html) 使 用 call0 方 法 调用 函数 计算 两 数 之 积 。 


<!DocTYPE html> 
<html> 
<head> 
<title> 使 用 call () 方 法 调用 </title> 
</head> 
<body> 
<p id="demo"></p> 
<script> 
var myObject; 
function myFunction(a, b) { 
return a*b; 
了 
myobject = myFunction.call (myObject, 30, 6); // 返 回 180 
document .getElementById ("demo") . innerHTML = myObject; 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap17.11.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-12 
所 示 。 


-oo x 
@ 司 GNUsereqiergADoc 亡 - | 车 全 朋 cal0 六 法 到 用 
a MS EEM tA) IAM Wu 
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图 17-12 使 用 call() 方 法 调用 函数 
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【 例 17-12】《 实 例文 件 ，ch17\Chap17.12.html)》 使 用 apply0 方 法 调用 函数 计算 两 数 之 积 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 使 用 apply() 方 法 调用 </title> 
</head> 
<body> 
<p id="demo"></p> 
<script> 
var myObject, myArray; 
function myFunction(a, b) { 
returna*b; 
} 
myArray = [30, 6] 
myObject = myFunction.apply (myObject, myArray); 
document .getElementById ("demo") .innerHTML = myObject; 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap17.12.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-13 
所 示 。 


- oO x 
国 csersqianguDoc 户 - | 关 人 Eapply0 方 法 有 

SE TN 
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17-13 ”使 用 apply() 方 法 调用 函数 


17.4 ”内 置 常规 函数 


内 置 函数 是 语言 内 部 事先 定义 好 的 函数 ,使 用 JavaScript 的 内 置 函 数 ， 可 提高 编程 效率 ， 常 用 的 内 置 函 
数 有 多 种 ， 下 面 进行 详细 介绍 。 


1. eval() 函 数 
eval0 函 数 计算 JavaScript 字符 串 ， 并 把 它 作为 脚本 代码 来 执行 。 如 果 参 数 是 一 个 表达 式 ，eval0 函 数 将 
执行 表达 式 ， 如 果 参 数 是 Javascript 语句 ，eval0 将 执行 Javascript 语句 。 语 法 结构 如 下 : 
eval (string) 
其 中 ， 参 数 string 是 必 选 项 。 要 计算 的 字符 串 ， 其 中 含有 要 计算 的 JavaScript 表达 式 或 要 执行 的 语句 。 
【 例 17-13】 〈 实 例文 件 ，chl7\Chap17.13.html) 使 用 eval0 函 数 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 使 用 eval () 函数 </title> 
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相关 的 代码 实例 请 参考 Chap17.13.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-14 
所 示 。 


17-14 ”使 用 eval() 函 数 


2.isFinite() 函 数 
isFinite() 函 数 用 于 检查 其 参数 是 否 是 无 穷 大 , 如 果 该 参数 为 非 数 字 、 正 无 穷 数 或 负 无 穷 数 , 则 返回 false， 
否则 返回 tue。 如 果 是 字符 串 类 型 的 数字 ， 则 将 会 自动 转化 为 数字 型 。 语 法 结构 如 下 ; 


其 中 ， 参 数 value 是 必 选 项 ， 为 要 检测 的 数值 。 
【 例 17-14】 《实例 文件 ， ch17\Chap17.14.html) 使 用 isFinite0 函 数 。 


相关 的 代码 实例 请 参考 Chap17.14.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-15 
所 示 。 
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二 El x 
司 cNuereqangwpoc P - | 大 全 BisFinte0B 数 
文件 有 ”篇 挤 () 坦 看 WV) 收 态 夫 A) 工具 帮 动 (H) 


true 
true 
true 
true 
false 
false 


17-15 ”使 用 isFinite() 函 数 


3.isNaN() 函 数 
isNaNO 函 数 用 于 检查 其 参数 是 否 是 非 数字 值 。 如 果 参 数值 为 NaN 或 字符 串 、 对 象 、undefined 等 非 数 


字 值 ， 则 返回 tue， 否 则 返回 false。 语 法 结构 如 下 : 


其 


isNaN (value) 


和 ， 参 数 value 为 必 选 项 ， 为 需要 检测 的 数值 。 
【 例 17-15】 〈 实 例文 件 ，ch17\Chap17.15.html) 使 用 isNaNO 函 数 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 使 用 isNaN() 函数 </title> 

</head> 

<body> 

<script> 

document .write (isNaN (123)+ "<br>"); 
document .write (isNaN(-1.23)+ "<br>"); 
document .write (isNaN (5-2)+ "<br>"); 
document .write (isNaN (0)+ "<br>"); 
document .write (isNaN ("Hello")+ "<br>"); 
document .write (isNaN ("2017/12/12")+ "<br>"); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap17.15.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-16 


所 示 。 


一 3 x 
@ 辣 crsersaqiangWpoc P ”|| 车 全 SNoNOB 下 
文件 (F) 。 编 罚 (E) 查看 (V) 收藏 夫人 A) 工具 (D) 帮助 (H) 


false 
false 
false 
false 
true 
true 


17-16 使 用 isNaN() 函 数 


4. parselnt() 函 数 
parseIntO 函 数 可 解析 一 个 字符 串 ， 并 返 | 


parseInt (string, radix) 


器 


一 个 整数 。 语 法 结构 如 下 : 
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参数 说 明 如 下 。 

string: 必 选 。 要 被 解析 的 字符 串 。 

radix: 可 选 。 表 示 要 解析 的 数字 的 基数 ， 该 值 介 于 2 一 36。 

当 参 数 radix 的 值 为 0， 或 没有 设置 该 参数 时 ，parseInt0 会 根据 string 来 判断 数字 的 基数 。 当 忽略 参数 
Tadix，JavaScript 默认 数字 的 基数 如 下 : 

如 果 string 以 "0x" 开 头 ，parseInt0 会 把 string 的 其 余部 分 解析 为 十 六 进 制 的 整数 。 

如 果 string 以 0 开头， 那么 ECMAScript v3 允许 parseInt0 的 一 个 实现 把 其 后 的 字符 解析 为 八进制 或 十 

六 进 制 的 数字 。 
如 果 string 以 1 一 9 的 数字 开头 ，parseInt0 将 把 它 解 析 为 十 进 制 的 整数 。 
【 例 17-16】 实例 文件 ，ch17\Chap17.16.html) 使 用 parseInt0 函 数 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 使 用 parseInt () 函数 </title> 

</head> 

<body> 

<script> 

document .write (parseInt ("10") + "<br>") ; 
document .write (parseInt ("10.33") + "<br>"); 
document .write (parseInt ("34 45 66") + "<br>"); 
document .write (parseInt (" 60 ") + "<br>"); 
document .write (parseInt ("40 years") + "<br>"); 
document .write (parseInt ("He was 40") + "<br>"); 
document .write ("<br>"); 

document .write (parseInt ("10",10)+ "<br>"); 
document .write (parseInt ("010")+ "<br>"); 
document .write (parseInt ("10", 8)+ "<br>"); 
document .write (parseInt ("0x10")+ "<br>"); 
document .write (parseInt ("10",16)+ "<br>"); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap17.16.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-17 
所 示 。 


本 ceeeqvewpac D -| 靖 WeporceiniO Bd 
HM WE) FEV WesN IAM mR) 


17-17 ”使 用 parselnt() 函 数 


5. parseFloat() 函 数 让 
parseFloat0 函 数 可 解析 一 个 字符 串 ， 并 返回 一 个 浮 点 数 。 该 函数 指定 字符 串 中 的 首 个 字符 是 否 是 数字 。 中 
如 果 是 ， 则 对 字符 串 进行 解析 ， 直 到 到 达 数 字 的 未 端 为 止 ， 然 后 以 数字 返 


吕 


加 


该 数字 ， 而 不 是 作为 字符 串 。 
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语法 结构 如 下 。 

parseFloat (string) 
其 中 ， 参 数 string 为 必 选 项 ， 为 要 被 解析 的 字符 串 。 

注意 : 字符 串 中 只 返回 第 一 个 数字 ， 开 头 和 结尾 的 空格 是 允许 的 ， 如 果 字 符 串 的 第 一 个 字符 不 能 被 转 
换 为 数字 ， 那 么 parseFloat0 会 返回 NaNL。 

【 例 17-17】 实例 文件 ，ch17\Chap17.17.html》 使 用 parseFloat0 函 数 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 使 用 parseFloat () 函数 </title> 

</head> 

<body> 

<script> 

document .write (parseFloat ("10") + "<br>"); 
document .write (parseFloat ("10.00") + "<br>"); 
document .write (parseFloat ("10.33") + "<br>"); 
document .write (parseFloat ("34 45 66") + "<br>"); 
document .write(parseFloat(" 60 ") + "<br>"); 
document .write (parseFloat ("40 years") + "<br>"); 
document .write (parseFloat ("He was 40") + "<br>"); 


</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap17.17.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-18 
所 示 。 


口 X 
© 装 CAsersiqinguDor D ~ 0 | 顾全 parceFon0 Bd 
文件 F) ” 替 强 (日 ”和 看 (V) 收 大 关 (A) 工具 (T) 笑 动 (H) 


图 17-18 ”使 用 parseFloat() 函 数 


6. escape() 函 数 
escape() 函 数 可 对 字符 串 进行 编码 ， 这 样 就 可 以 在 所 有 的 计算 机 上 读 取 该 字符 串 。 该 方法 不 会 对 ASCII 
字母 和 数字 进行 编码 ， 也 不 会 对 下 面 这 些 ASCII 标点 符号 进行 编码 * @- __+ ./。 其 他 所 有 的 字符 都 会 被 
转 义 序列 替换 。 语 法 结构 如 下 : 

escape(string) 
其 中 ， 参 数 string 为 必 选 项 ， 是 要 被 转 义 或 编码 的 字符 串 。 
【 例 17-18】 实例 文件 ，ch17\Chap17.18.html) 使 用 escape0 函 数 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 使 用 escape () 函数 </title> 
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相关 的 代码 实例 请 参考 Chap17.18.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-19 
所 示 。 
(Op Do i “| 
 X# 四 ”二 且 晶 瑟 在 M| 《三 夫 工具 胡 芭 IH) 
escape () 函数 应 用 示例 
全 格 符 对 应 的 编码 是 $20， 感 叹 号 对 应 的 编码 符 是 %21， 
故 ， 执 行 语句 escape( "bello Javascript!") 后 ， 
结 时 为 ，hellok20JavaScriptk21 


图 17-19 使 用 escape() 函 数 
7. unescape() 函 数 
unescape0 函 数 可 对 通过 escapeO 编 码 的 字符 串 进行 解码 。 语 法 结构 如 下 : 
unescapelstring) 


其 中 ， 参 数 string 为 必 选 项 ， 是 要 解码 的 字符 串 。 
【 例 17-19】 (实例 文件 ，chl7\Chap17.19.html) 使 用 unescape0 函 数 。 


相关 的 代码 实例 请 参考 Chap17.19.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-20 
所 示 。 
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= 口 X 
司 cAUsers\qiangu\Doc 只 - | 情人 unescape0 双 数 
文件 (站 锭 入 (E) 坦 看) 收藏 夫 (A) 工具 (大 序 (H) 


unescape () 函数 应 用 示例 
空格 符 对 应 的 编码 是 %20， 感 叹 号 对 应 的 编码 符 是 %21， 
故 ， 执 行 语句 unescape(" Hello%20JavaScript%21 ) 后 ， 


结果 为 ，Hello JavaScript! 


图 17-20 使 用 unescape() 函 数 


17.5 JavaScript 特殊 函数 


在 了 解 了 什么 是 函数 以 及 函数 的 调用 方法 外 ， 下 面 介绍 一 些 特殊 函数 ， 如 髓 套 函 数 、 递 归 函 数 、 内 嵌 
函数 等 。 


17.5.1 ”由 套 函数 


顾名思义 ， 毁 套 函 数 就 是 在 函数 的 内 部 再 定义 一 个 函数 ， 这 样 定 义 的 优点 在 于 可 以 使 用 内 部 函数 轻松 
获得 外 部 函数 的 参数 以 及 函数 的 全 局 变量 。 菊 套 函 数 的 语法 格式 如 下 ; 


function 外 部 函数 名 (参数 1, 参 数 2) { 
function 内 部 函数 名 () { 
函数 体 
) 
} 


【 例 17-20】〔 实 例文 件 ，ch17\Chap17.20.html) 使 用 嵌 套 函数 计算 三 个 数值 之 和 。 


<!DOCTYPE html > 

<html> 

<head> 

<title> 嵌 套 函 数 的 应 用 </title> 


<script type="text/javascript"> 


var outter=30; // 定 义 全 局 变量 
function add (numberl, number2) { /7 定义 外 部 函数 
function inneradd(){ /7 定义 内 部 函数 
alert ("参数 的 和 为 : "+ (numberl+number2+outter) ) 7 // 取 参数 的 和 
} 
return innerAdd(); // 调 用 内 部 函数 
} 
</script> 
</head> 
<body> 
<script type="text/javascript"> 
adq (30,30); // 调 用 外 部 函数 
</script> 
</body> 
</html> 


352 


第 国 章 “Javascript 函数 与 闭 包 


相关 的 代码 实例 请 参考 Chap17.20.html 文件 ， 然 后 双击 该 文件 ， 在 下 浏览 器 中 运行 的 结果 如 图 17-21 
所 示 。 


图 17-21 庶 套 函 数 的 应 用 结果 
注意 : 嵌 套 函数 在 JavaScript 语言 中 的 功能 非常 强大 ， 但 是 使 用 说 套子 数 会 使 程序 可 读 性 降低 。 


17.5.2 ”递归 函数 


递归 是 一 种 重要 的 编程 技术 ， 它 用 于 让 一 个 函数 从 其 内 部 调用 其 自身 。 在 定义 递归 函数 时 ， 需 要 两 个 
必要 条 件 ， 首 先 包括 一 个 结束 递归 的 条 件 ， 其 次 包括 一 个 递归 调用 的 语句 。 
递归 函数 的 语法 格式 如 下 ; 


【 例 17-21】 《实例 文件 ，chl17\Chap17.21.html) 递归 函数 的 使 用 。 


ss 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 


NA/ 


下 


相关 的 代码 实例 请 参考 Chap17.21.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-22 


所 示 。 


图 17-22 ”函数 的 递归 调用 
单 击 “ 测 试 ”按钮 ， 即 可 在 弹出 的 信息 提示 框 中 查看 递归 函数 的 使 用 ， 如 图 17-23 所 示 。 


i 
i 


30+sumey 
= 28+sum(26y 
= 26+suml24Y 

raami22F 


中 轩 当 再 员 加 册 出 于 四 于 
TI 


让 
共 


图 17-23 查看 运行 结果 


提示 :在 上 述 代码 中 ,为 了 求 取 30 以 内 的 偶数 和 定义 了 递归 函数 sum(m)， 而 函数 Test0 对 其 进行 调用 ， 
并 利用 alert 方法 弹出 相应 的 提示 信息 。 
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17.5.3 ”内 赃 函 数 


所 有 函数 都 能 访问 全 局 变量 ， 实 际 上 ， 在 JavaScript 中 ， 所 有 函数 都 能 访问 它们 上 一 层 的 作用 域 。 
JavaScript 支持 内 嵌 函 数 ， 内 嵌 函 数 可 以 访问 上 一 层 的 函数 变量 ， 内 柑 函 数 plus0 可 以 访问 父 函数 的 counter 
变量 。 

【 例 17-22】 (实例 文件 ，ch17\Chap17.22.html》〉 内 嵌 函 数 的 使 用 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 内 嵌 函 数 的 使 用 </title> 
</head> 
<body> 
<p> 局 部 变量 计数 </p> 
<p id="demo">0</p> 
<script> 
// 调 用 函数 add() 并 赋值 给 demo 
document .getElementById("demo") .innerHTML = add(); 
function add() { 
Var counter = 0; 
function plus() {counter += 1;} 
plus(); 
return counter; 


} 

</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap17.22.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-24 
所 示 。 


-_ OO x 
装 cNueereqiengwpcc -0 | 合 夫 也 本 的 区 用 
文中 晨 (E) 查看 (V) 履 基 到 工具 (T) 元 (H) 
局 部 变量 计数 
L 


图 17-24 ”内 嵌 函 数 的 使 用 


17.6 JavaScript 的 闭 包 


闭 包 可 以 用 在 许多 地 方 ， 它 的 最 大 用 处 有 两 个 ， 一 个 是 前 面 提 到 的 可 以 读 取 函 数 内 部 的 变量 ， 另 一 个 
就 是 让 这 些 变量 的 值 始终 保持 在 内 存 中 。 


17.6.1 什么 是 闭 包 
闭 包 是 一 个 拥有 许多 变量 和 绑 定 了 这 些 变量 的 环境 的 表达 式 〈 通 常 是 一 个 函数 )， 因 而 这 些 变量 也 是 该 
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表达 式 的 一 部 分 。 在 JavaScript 中 ， 所 有 的 function 都 是 一 个 闭 包 ， 不 过 一 般 来 说 ， 幅 套 的 function 所 产生 
的 闭 包 更 为 强大 ， 也 是 大 部 分 时 候 所 谓 的 “ 闭 包 ”。 
下 面 举例 说 明 什么 是 闭 包 ， 具 体 实例 代码 如 下 : 


function closure(){ 
var str = "I'ma part variable."; 
return function(){ 
alert (str); 
} 
} 
var fobj = closure(); 
fobj () 7 


在 上 面 代码 中 ,str 是 定义 在 函数 closure 中 的 局 部 变量 , 若 str 在 closure 函数 调用 完成 以 后 不 能 再 被 访 
问 ， 则 在 函数 执行 完成 后 str 将 被 释放 。 但 是 由 于 函数 closure 返回 了 一 个 内 部 函数 ， 且 这 个 返回 的 函数 引 
用 了 str 变量 ， 导 致 了 str 可 能 会 在 closure 函数 执行 完成 以 后 还 会 被 引用 ， 所 以 str 所 占用 的 资源 不 会 被 回 
收 ， 这 样 closure 就 形成 了 一 个 闭 包 。 

【 例 17-23】 实例 文件 ，ch17\Chap17.23.html)》 使 用 闭 包 统计 计数 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 使 用 闭 包 统计 计数 </title> 
</head> 
<body> 
<p> 局 部 变量 计数 </p> 
<button type="button" onclick="myFunction()"> 计 数 !</button> 
<p id="demo">0</p> 
<script> 
var add = (function () { 
Var counter = 0; 
return function () {return counter += 1;} 
DoO; 
function myFunction(){ 
document .getElementById ("demo") .innerHTML = add(); 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap17.23.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-25 
所 示 。 


嗓 [ml x 
司 csers\qiangu\Dorc P - 0 | 顾 借用 站 和 过 tht 数 
文件 (明光 坊 (E) 查看 (V) 让 大 (A) 工具 (Tm 塘 却 (H) 


局 部 变量 计数 
计数 ! 


0 


图 17-25 使 用 闭 包 统计 计数 


单 击 “计数 ”按钮 ， 即 可 开始 统计 局 部 变量 计数 信息 ， 单 击 一 次 ， 显 示 计 数 为 1， 单 击 两 次 ， 显 示 计 
数 为 2， 以 此 类 推 ， 如 图 17-26 所 示 。 
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= 口 x 
各 CAUsers\qiangu\Doc ”0 | 确 使 用 问 包 综 计 计 数 
文件 |” 坊 委 (E) 二 看 (V) 收 训 夫 (A) 工具 Mm 帮 肥 (H) 
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图 17-26 显示 计算 结果 


17.6.2 ” 闭 包 的 原理 


JavaScript 允许 使 用 内 部 函数 ， 即 函数 定义 和 函数 表达 式 位 于 另 一 个 函数 的 函数 体内 。 而 且 ， 这 些 内 部 
函数 可 以 访问 它们 所 在 的 外 部 函数 中 声明 的 所 有 局 部 变量 、 参 数 和 声明 的 其 他 内 部 函数 ， 当 其 中 一 个 这 样 
的 内 部 函数 在 包含 它们 的 外 部 函数 之 外 被 调用 时 ， 就 会 形成 闭 包 ， 这 就 是 闭 包 的 原理 。 


17.6.3” 闭 包 与 类 


JavaScript 中 的 “类 ”其 实 不 是 真正 的 类 ， 它 只 是 表现 的 像 其 他 面向 对 象 的 语言 中 的 类 而 已 ， 它 的 本 质 
是 函数 + 原型 对 象 (prototype)。 先 来 看 一 段 简单 的 代码 ， 该 段 代码 的 作用 是 新 建 一 个 类 ， 代 码 如 下 : 


function Myclass(x) { 
this.x = X7 
时 
var obj = new MyClass('Hello class'); 
alert (obj .x); 


在 上 述 代 码 中 ，obj 具有 一 个 x 属性 ， 现 在 的 值 是 Hello class，MyClass 是 一 个 函数 ， 我 们 称 之 为 构造 
函数 ， 在 其 他 编程 语言 中 ， 构 造 函数 是 要 放 在 class 关键 字 内 部 的 ， 也 就 是 先 要 声明 一 个 类 。 

在 JavaScript 的 函数 中 ，this 关键 字 表示 的 是 调用 该 函数 的 作用 域 (scope)， 可 以 简单 地 理解 为 它 是 调 
用 函数 的 对 象 ， 再 来 看 MyClass 函数 ， 如 果 把 代码 修改 为 如 下 代码 : 

var obj = Myclass('Hello class'); 

这 是 完全 合乎 语法 的 ， 如 果 这 段 代码 是 在 浏览 器 中 运行 的 ， 调 试 一 下 可 以 发 现 ， 内 部 的 this 是 window 
对 象 ， 而 与 obj 没有 任何 关系 ，obj 还 是 undefined，alert 也 不 会 有 结果 。 原 来 的 代码 之 所 以 可 以 工作 ， 都 是 
因为 new 关键 字 起 的 作用 。 

new 关键 字 把 一 个 普通 的 函数 变 成 了 构造 函数 。 也 就 是 说 ， MyClass 还 是 一 个 普通 的 函数 ， 它 之 所 以 能 
构造 出 一 个 obj, 基本 上 是 new 的 功劳 。 当 函数 之 前 有 new 关键 字 的 时 候 ，JavaScript 会 创造 一 个 匿名 对 象 ， 
并 且 把 当前 函数 的 作用 域 设置 为 这 个 匿名 对 象 。 然 后 在 那个 函数 内 部 引用 this 的 话 就 是 引用 的 这 个 匿名 对 
象 ， 最 后 ， 即 使 这 个 函数 没有 retum， 它 也 会 把 这 个 匿名 对 象 返回 出 去 。 那 么 obj 自然 就 具有 了 x 属性 , 现 
在 这 个 MyClass 就 具有 一 点 类 的 特性 了 。 

一 个 对 象 具有 类 特性 ， 这 并 不 是 new 关键 字 的 工作 的 全 部 ，JavaScript 同样 可 以 方便 地 实现 继承 ,依靠 
是 prototype，prototype 也 是 一 个 对 象 ， 毕 竟 除 了 原始 类 型 ， 所 有 的 东西 都 是 对 象 ， 包 括 函 数 。 更 为 重要 的 
是 ， 前 面 提 到 的 JavaScript 是 prototype 基础 ， 它 的 含义 就 是 在 JavaScript 中 没有 类 的 概念 ， 类 是 不 存在 的 ， 
一 个 函数 ， 它 之 所 以 表现 得 像 类 ， 就 是 因为 prototype，Pprototype 可 以 有 各 种 属性 ， 也 包括 函数 。 

关键 字 new 在 构造 对 象 的 过 程 中 ,并 在 最 终 返 回 那个 匿名 对 象 之 前 ， 还 会 把 那个 函数 的 prototype 中 的 
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属性 一 一 复制 给 这 个 对 象 。 这 里 的 复制 是 复制 的 引用 ， 而 不 是 新 建 的 一 个 对 象 ， 把 内 容 复 制 过 来 ， 在 其 内 


部 ， 


相当 于 保留 了 一 个 构造 它 的 函数 的 prototype 的 引用 ， 该 属性 对 外 是 不 可 见 的 ， 只 有 函数 对 象 是 有 


prototype 属性 的 ， 函 数 对 象 的 prototype 默认 有 一 个 constructor 属性 。 下 面具 体 的 实例 代码 如 下 : 


【 例 17-24】 实例 文件 ，ch17\Chap17.24.html) 输出 同学 姓名 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 输 出 同学 姓名 </title> 
</head> 
<body> 
<script> 
function MyClass(x) { 
this.x = X7 
var proobj = new MyClass('x'); 
Inheritclass.prototype = proobj7 
MyClass.prototype.protox = 'xxx'; 
function Inheritclass(y) { 
this.y = y; 
} 
var obj = new Inheritclass('Hello class'); 
MyClass.prototype.protox = "刘亦婷 "7 
Proobj .x = ' 汪 一 涵 '; 
alert (obj .protox); 
alert (obj .x); 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap17.24.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-27 


所 示 ， 弹 出 的 结果 是 “刘亦婷 ”。 


单 击 “ 确 定 ” 按 钮 ， 弹 出 一 个 网 页 信息 提示 框 ， 输 入 的 结果 是 “ 汪 一 涵 ” 如 图 17-28 所 示 。 


来 生 网 页 的 清 息 。 X 
A ws 惫 三 = 


17-27 显示 运行 结果 图 17-28 显示 输入 的 结果 
此 代码 说 明了 对 象 内 部 保留 的 是 构造 函数 的 prototype 的 引用 ， 要 注意 的 是 ，proObj 中 也 是 保留 的 它 的 


闲 富 网 页 的 湛 息 。 X 


构造 函数 的 prototype 的 引用 。 如 果 把 实例 代码 改 成 如 下 代码 : 
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【 例 17-25】 实例 文件 ，ch17\Chap17.25.html) 输 出 同学 姓名 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 输 出 同学 姓名 </title> 
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</head> 
<body> 
<script> 
function Myclass(x) { // 创 建构 造 函数 MyClass 
this.x = x; 
} 
var proobj = new MyClass('x'); 
Inheritclass.prototype = proobj7 
MyClass.prototype.protox = "XXXKIT 
function Inheritclass(y) { 
this.y = y; 
} 
var obj = new Inheritclass('Hello class'); 
proobj .protox = ' 班 级 名 单 ' 
MyClass.prototype.protox = ' 刘 亦 婷 '; 
Proobj .x = ' 汪 一 涵 '; 
alert (obj .protox); 
alert (obj .x); 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap17.25.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-29 
所 示 ， 弹 出 的 结果 是 “班级 名 单 ”。 
单 击 “确定 ”按钮 ， 弹 出 一 个 网 页 信息 提示 框 ， 输 入 的 结果 是 “ 汪 一 涵 ” 如 图 17-30 所 示 。 


A ne 惫 和 
EE 到 EE 


图 17-29 弹出 班级 名 单 图 17-30 显示 输入 的 结果 


事实 上 , 在 上 述 代码 中 , 这 些 prototype 逐 层 引用 , 构成 了 一 个 prototype 链 。 当 读 取 一 个 对 象 的 属性 时 ， 
首先 寻找 自己 定义 的 属性 ， 如 果 没 有 ， 就 逐 层 向 内 部 隐 含 的 prototype 属性 寻找 。 但 是 在 写 属性 时 ， 就 会 把 
它 的 引用 覆盖 掉 ， 是 不 会 影响 prototype 的 值 的 。 


17.6.4” 闭 包 中 需要 注意 的 地 方 


林 后 网 页 的 消息 。 XX 


(1) 由 于 闭 包 会 使 得 函数 中 的 变量 都 被 保存 在 内 存 中 ， 内 存 消耗 很 大 ， 所 以 不 能 滥用 闭 包 ， 否 则 会 造 
成 网 页 的 性 能 问题 ， 在 正 中 可 能 导致 内 存 泄露 。 解 决 方法 是 ， 在 退出 函数 之 前 ， 将 不 使 用 的 局 部 变量 全 部 
删除 。 

(2) 闭 包 会 在 父 函 数 外 部 ， 改 变 父 函数 内 部 变量 的 值 。 所 以 ， 如 果 用 户 把 父 函 数 当 作对 象 (object) 使 
用 ， 把 闭 包 当 作 它 的 公用 方法 (Public Method)， 把 内 部 变量 当 作 它 的 私有 属性 (private value)， 这 时 一 定 
要 小 心 ， 不 要 随便 改变 父 函数 内 部 变量 的 值 。 
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17.7 回调 函数 设计 模式 


可 调 函数 是 程序 设计 的 一 种 方法 ， 所 谓 回调 ， 就 是 程序 C 调用 程序 S 中 的 某 个 函数 A， 然 后 S 又 在 某 
个 时 候 反 过 来 调用 C 中 的 某 个 函数 B， 对 于 C 来 说 ， 这 个 B 便 叫 作 回 调 函数 。 


17.7.1 回调 函数 与 控制 反 转 


可 调 函数 这 种 方法 是 指 在 传递 了 可 能 会 进行 调用 的 函数 或 对 象 之 后 ， 在 需要 时 再 分 别 对 其 进行 调用 ， 
于 调用 方 与 被 调用 方 的 依赖 关系 与 通常 相反 ， 所 以 也 成 为 控制 反 转 (IoC，Inversion of Control)。 
由 于 历史 原因 ， 在 JavaScript 开发 中 我 们 常常 会 用 到 回调 函数 这 一 方法 ， 这 是 多 种 因素 导致 的 。 
第 一 个 原因 是 在 客户 端 JavaScript 中 基本 都 是 GUI 程序 设计 。GUI 程序 设计 是 一 种 很 适合 使 用 所 谓 事 
件 驱 动 的 程序 设计 方式 事件 驱动 正 是 一 种 回调 函数 设计 模式 。 客 户 端 JavaScript 程序 设计 是 一 种 基于 DOM 
的 事件 驱动 式 程序 设计 。 
第 二 个 原因 是 源 于 客户 端 无 法 实现 多 线程 程序 设计 (最近 HTML 5 Web Works 支持 多 线程 了 )。 而 通过 
将 回调 函数 与 异步 处 理 相 结合 ， 就 能 够 实现 并 行 处 理 。 由 于 不 支持 多 线程 ， 所 以 为 了 实现 并 行 处 理 ， 不 得 
不 使 用 回调 函数 ， 这 逐渐 成 为 一 种 惯例 。 
最 后 一 个 原因 与 JavaScript 中 的 函数 声明 表达 式 和 闭 包 有 关 。 


17.7.2 ”JavaScript 与 回调 函数 


在 JavaScript 中 ， 回 调 函数 是 需要 定义 的 ， 下 面 给 出 一 个 回调 函数 的 实例 。 
【 例 17-26】 〈 实 例文 件 ，ch17\Chap17.26.html) 回调 函数 的 应 用 。 


<!DocTYPE html> 
<html> 
<head> 
<title> 回 调 函数 的 应 用 </title> 
</head> 
<body> 
<script> 
var emitter = { 
// 为 了 能 够 注册 多 个 回调 函数 而 通过 数组 管理 
callbacks:[]， 
// 回 调 函 教 的 注册 方法 
register:function (fn) { 
this.callbacks.push (fn); 


这 
7/ 事件 的 触发 处 理 
onopen:function () { 
for (var f in this.callbacks) { 
this.callbacks[f£f] (); 
} 
} 
a 
emitter.register (function () {alert("event handlerl is called");}) 
emitter.register (function () {alert("event handler2 is called");}) 
emitter.onopen () 7 
//"event handlerl is called" 
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//"event handler2 is called" 
</script> 
</body> 
</html> 
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相关 的 代码 实例 请 参考 Chap17.26.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-31 


所 示 。 


单 击 “ 确 定 ” 按 钮 ， 弹 出 另外 一 个 网 页 信息 提示 框 ， 如 图 17-32 所 示 。 


图 17-31 回调 函数 的 应 用 
在 上 述 代码 中 ， 定 义 的 两 个 匿名 函数 就 是 


可 


风衣 时 


生 event handlerz is called 


图 17-32 信息 提示 框 
调 函数 ， 它 们 的 调用 由 emitter.onOpen0 完 成 。 对 emitter 来 


说 , 这 仅仅 是 对 注册 的 函数 进行 了 调用 ,不 过 根据 回调 函数 的 定义 ， 更 应 该 关注 使 用 了 emitter 部 分 的 情况 。 
从 这 个 角度 来 看 ， 注 册 过 的 回调 函数 与 之 形成 的 是 一 种 调用 与 被 调用 的 关系 。 


17.8 制作 伸缩 两 级 菜单 


对 于 菜单 一 般 都 会 有 一 级 菜单 、 二 级 菜单 ， 并 且 根 据 实 际 情况 菜单 的 级 数 是 不 定 的 ， 所 以 ， 要 想 制 作 
一 个 菜单 ， 需 要 先 建立 一 个 好 的 HTML 框架 ， 设 计 好 菜单 的 级 数 。 下 面 制作 一 个 伸缩 两 级 菜单 。 
步骤 1: 设计 HIML 网 页 框架 ， 具体 的 代码 如 下 : 


<!DOCTYPE html> 

<html> 

<head> 

<title> 制 作 伸缩 两 级 菜单 </ 上 itle> 

</head> 

<body> 

<div id="navigation"> 

<ul id="listUL"> 
<li><a href="#"> 个 人 中 心 </a> 

<ul> 


<li><a href="#"> 个 人 资料 </a></1i> 
<1li><a href="#"> 与 我 相关 </a></1i> 
<li><a href="#"> 好 友 动 态 </a></1i> 


</ul> 
</1i> 
<1i><a href="#"> 我 的 主页 </a> 
<ul> 


<li><a href="#"> 日 志 </a></1i> 
<li><a href="#"> 相 册 </a></1i> 


<1i><a href="#"> 状 态 </a></1i> 
</ul> 
</1i> 
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相关 的 代码 实例 请 参考 Chap17.27.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-33 
所 示 。 


图 17-33 设计 HTML 网 页 框架 
步骤 2: 在 网 页 中 添加 CSS 代码 ， 先 对 一 级 菜单 进行 风格 设置 ， 具 体 代码 如 下 : 
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} 


hi1{ 
color:red; /* 文 字 颜 色 */ 
background-color:#49ff01; /+ 背景 色 */ 
text-align:center; /* 居 中 */ 
padding:20px; /* 边 距 */ 

} 

img{float:left; /* 居 左 */ 

border:2px #F00 solid; /* 设 置 边框 +/ 

margin: Spx; /* 设 置 边 距 */ 


} 
</style> 
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相关 的 代码 实例 请 参考 Chap17.27.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-34 


所 示 。 


国 cNusersqianewpoc 了 ~ 0 [BWireammse 
诡 件 | 需 久 下 至 看 V)】 收 瑟 到 A) 工具 (]。 邦和 (H 


x 


OT 
Em 


图 17-34 添加 CSS 代码 修饰 一 级 菜单 
步骤 3， 在 网 页 中 添加 CSS 代码 ， 对 二 级 子 菜单 做 相应 的 风格 设置 ， 具 体 代码 如 下 


#navigation ul 1i ul{ 
margin:Opx; 
padding:0px Opx Opx Opx; 


} 

#navigation ul li ul 1i{ 
border-top:1px solid #ED9F9F; 

} 

#navigation ul li ul li at 
display:block; 
padding:3px 3px 3px 0.5em; 
text-decoration:none; 
border-left:28px solid #a7lflf; 
border-right:1px solid #711515; 

} 


#navigation ul li ul 1i a:link, #navigation ul li ul 1i a:visited{ 


background-color:#e85070; 
Color:#FFFFFF; 

} 

#navigation ul li ul 1i a:hover{ 
background-color:#c2425d; 
color:#ffff00; 
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} 


#navigation ul 1i ul.myHide{ 
display:none; /* 隐 藏 子 菜单 *#/ 
} 
#navigation ul 1i ul.myshow{ 
display:block; /*# 显 示 子 菜单 */ 
} 
相关 的 代码 实例 请 参考 Chap17.27.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-35 


所 示 。 


图 x 


siangwiDocun 月 ~ © | 合同 
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图 17-35 添加 CSS 代码 修饰 二 级 菜单 
步骤 4: 添加 JavaScript 代码 ， 为 菜单 添加 上 伸缩 效果 ， 具 体 代 码 如 下 : 


<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
function change(){ 
var SecondDiv = this.parentNode.getElementsByTagName ("ul") [0]; 
if (SecondDiv.className "myHide") // 通 过 CSS 交替 更 换 实现 显 隐 


"myShow"; 


SecondDiv.className 
else 
SecondDiv.className = "myHiden7 
} 
window.onload = function(){ 
var Ul = document .getElementById ("listUL"); 
var aLi = Ul.childNodes; 
Var aA; 
for(var i=0;i<aLi.length;i++){ 


// 如 果子 元 素 为 1i, 且 这 个 1i 有 子 菜单 ul 


if(aLi[i].tagName == "LI" && aLi[i].getElementsByTagName ("ul") .length){ 
A = aLili].firstchild; // 找 到 超 链 接 
A.onclick = change; // 动 态 添加 点 击 函 数 
} 
} 
} 
</script> 


相关 的 代码 实例 请 参考 Chap17.27.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 17-36 
所 示 。 
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图 17-36 ”伸缩 两 级 菜单 的 显示 效果 


17.9 ”就业 面试 技巧 与 解析 


17.9.1 ”面试 技巧 与 解析 (一) 


面试 官 :在 完成 某 项 工作 时 ， 你 认为 领导 要 求 的 方式 不 是 最 好 的 ， 自 己 还 有 更 好 的 方法 ， 你 会 怎么 做 ? 

应 聘 者 : 原则 上 我 会 尊重 和 服从 领导 的 工作 安排 ， 同 时 私 底下 找 机 会 以 请 教 的 口吻 ， 婉 转 地 表达 自己 
的 想法 ， 看 看 领导 是 否 能 改变 想法 。 如 果 领导 没有 采纳 我 的 建议 ， 我 也 同样 会 按 领导 的 要 求 认真 地 去 完成 
这 项 工作 。 还 有 一 种 情况 ， 假 如 领导 要 求 的 方式 违背 原则 ， 我 会 坚决 提出 反对 意见 ， 如 领导 仍 固执 己见 ， 
我 会 毫 不 犹 殉 地 再 向 上 级 领导 反映 。 


17.9.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 假设 你 在 某 单位 工作 成 绩 比 较 突出 ， 得 到 领导 的 肯定 。 但 同时 你 发 现 同事 们 越 来 越 亚 立 你 ， 
你 怎么 看 这 个 问题 ? 你 准备 怎么 办 ? 

应 聘 者 : 成 绩 比较 突出 ， 得 到 领导 的 肯定 是 件 好 事情 ， 以 后 我 会 更 加 努力 。 针 对 被 孤立 的 事情 ， 需 要 
检讨 一 下 自己 是 不 是 对 工作 的 热心 度 超过 了 同事 间 交 往 的 热心 ， 在 工作 之 余 加 强 同事 间 的 交往 和 发 掘 共同 
的 兴趣 爱好 。 在 工作 中 ， 不 伤害 别人 的 自尊 心 ， 不 在 领导 面前 搬 弄 是 非 。 
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第 18 章 
JavaScript 窗口 与 人 机 交互 对 话 框 


”学 习 指引 


窗口 与 对 话 框 是 用 户 浏览 网 页 中 最 常 遇 到 的 元 素 ， 在 JavaScript 中 使 用 window 对 象 可 以 操作 窗口 与 对 
话 框 ， 本 章 将 详细 介绍 JavaScript 窗口 与 人 机 交互 对 话 框 的 应 用 ， 主 要 内 容 包括 window 对 象 、 打 开 与 关闭 
窗口 、 操 作 窗口 对 象 、 调 用 对 话 框 等 。 


”重点 导读 


。 掌 握 window 对 象 的 使 用 方法 。 

。 掌 握 打 开 与 关闭 窗口 的 方法 。 

* 掌 握 操作 窗口 对 象 的 方法 。 

* 掌 握 获 取 窗口 历史 记录 的 方法 。 

。 掌 握 JavaScript 对 话 框 的 使 用 方法 。 

。 掌 握 JavaScript 其 他 对 象 的 使 用 方法 。 


18.1 window 对 象 


window 对 象 表示 浏览 器 中 打开 的 窗口 ， 如 果 文 档 包含 框架 〈<frame> 或 <ifiame> 标 签 )， 浏 览 器 会 为 
HTML 文档 创建 一 个 window 对 象 ， 并 为 每 个 框架 创建 一 个 额外 的 window 对 象 。 


18.1.1 window 对 象 属性 


window 对 象 在 客户 端 JavaScript 中 扮演 重要 的 角色 ， 它 是 客户 端 程序 的 全 局 (默认) 对象， 该 对 象 包 
含 多 个 属性 ，window 对 象 常用 的 属性 及 描述 如 表 18-1 所 示 。 
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表 18-1 window 对 象 常用 的 属性 及 描述 


属 性 描述 
closed 返回 窗口 是 否 已 被 关闭 
defaultStatus | 设置 或 返回 窗口 状态 栏 中 的 默认 文本 
document 对 Document 对 象 的 只 读 引用 
frames 返回 窗口 中 所 有 命名 的 框架 。 该 集合 是 Window 对 象 的 数组 ， 每 个 Window 对 象 在 窗口 中 含有 一 个 框架 
history 对 History 对 象 的 只 读 引用 
innerHeight 返回 窗口 的 文档 显示 区 的 高 度 
innerWidth 返回 窗口 的 文档 显示 区 的 宽度 
length 设置 或 返回 窗口 中 的 框架 数量 
location 用 于 窗口 或 框架 的 Location 对 象 
name 设置 或 返回 窗口 的 名 称 
navigator 对 Navigator 对 象 的 只 读 引 用 
opener 返回 对 创建 此 窗口 的 引用 
outerHeight 返回 窗口 的 外 部 高 度 ， 包 含 工具 条 与 滚动 条 
outerWidth 返回 窗口 的 外 部 宽度 ， 包 含 工具 条 与 滚动 条 
pageXOffset 设置 或 返回 当前 页 面相 对 于 窗口 显示 区 左上 角 的 义 位置 
pageYOffset 设置 或 返回 当前 页 面相 对 于 窗口 显示 区 左上 角 的 立 位 置 
parent 返回 父 窗口 
screen 对 Screen 对 象 的 只 读 引用 
screenLeft 返回 相对 于 屏幕 窗口 的 x 坐标 
screenTop 返回 相对 于 屏幕 窗口 的 y 坐标 
ScreenX 返回 相对 于 屏幕 窗口 的 x 坐标 
ScreenY 返回 相对 于 屏幕 窗口 的 y 坐标 
self 返回 对 当前 窗口 的 引用 。 等 价 于 window 属性 
status 设置 窗口 状态 栏 的 文本 
top 返回 最 顶层 的 父 窗口 

熟悉 并 了 解 window 对 象 的 各 种 属性 ， 将 有 助 于 一 个 Web 应 用 开发 者 的 设计 开发 。 


1. defaultStatus 属性 
几乎 所 有 的 Web 浏览 器 都 有 状态 条 〈 栏 )， 如 果 需 要 打开 浏览 器 即 在 其 状态 条 显示 相关 信息 ， 可 以 为 
浏览 器 设置 默认 的 状态 条 信息 ，window 对 象 的 defaultStatus 属性 可 实现 此 功能 ， 其 语法 格式 如 下 : 
window.defaultstatus="statusMsg"; 
其 中 ，statusMsg 代表 了 需要 在 状态 条 显示 的 默认 信息 。 
下 面 给 出 一 个 实例 ， 在 状态 栏 中 设置 一 个 默认 文本 。 
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【 例 18-1】 (实例 文件 ，chl18\Chap18.1html) 设置 状态 栏 默认 信息 。 


<!DOCTYPE html> 

<html> 

<head> 
<title> 设 置 状 态 栏 信息 </title> 
</head> 

<body> 

<script> 


window.defaultStatus=" 本 站 内 容 更 加 精彩 ! !"; 7/ 状态 栏 中 设置 一 个 默认 文本 


</script> 

<p> 查 看 状态 栏 中 的 文本 .</p> 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap18.1.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 18-1 所 示 。 


- DO x 


司 cAUcerc\qiangu\Doc P -上司 议 杰 状 志 仿生 时 
文 作 中 ”六 日 ”二 看 (V)， 收 若 夫 (A) 工具 []。 帮助 (H) 


查看 状态 栏 中 的 文本 。 


本 站 内 容 更 00 粮 箭 | | 


乳 100% ~ 


图 18-1 设置 状态 栏 信 息 
注意 : defaultStatus 属性 在 Firefox、Chrome 或 Safari 的 默认 配置 下 是 不 工作 的 。 


2. frames 属性 


框架 可 以 把 浏览 器 窗口 分 成 几 个 独立 的 部 分 ， 每 部 分 显示 单独 的 页 面 ， 页 面 的 内 容 是 互相 联系 的 ， 框 


架 是 一 种 特殊 的 窗口 ， 在 网 页 设计 中 经 常 遇 到 。 


如 果 当 前 窗口 是 在 框架 <frame> 或 <iframe> 中 ， 通 过 window 对 象 的 frameElement 属性 可 获取 当前 窗口 


所 在 的 框架 对 象 ， 其 语法 格式 如 下 : 


var documentObj=window. frameElement; 


其 中 ，frameObj 是 当前 窗口 所 在 的 框架 对 象 。 使 用 该 属性 获得 框架 对 象 后 ， 可 使 用 框架 对 象 的 各 种 属性 与 


方法 ， 从 而 实现 对 框架 对 象 进 行 各 种 操作 。 


下 面 给 出 一 个 实例 ， 该 实例 将 窗口 分 为 两 个 部 分 的 框架 集 ， 并 指定 名 称 为 mainFrame 的 框架 的 源 文件 


为 main.html，topFrame 的 框架 源 文件 是 top.html。 当 用 户 单 


上 6 mainFrame 框架 中 的 “窗口 框架 ”按钮 ， 即 


可 获取 当前 窗口 所 在 的 框架 对 象 ， 同 时 弹出 提示 信息 ， 并 显示 框架 的 名 称 。 
【 例 18-2】 (实例 文件 ，chl8\Chap18.2.html) frames 属性 应 用 实例 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 含 有 窗口 框架 的 网 页 </title> 
</head> 


<frameset rows="60,*" cols="#" frameborder="1" border="1l" framespacing="1"> 


<frame src="top.html " name="topFrame" scrolling="no" id="top" 
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main .html 文件 的 具体 内 容 如 下 : 


而 top.html 文件 的 具体 内 容 如 下 : 


AN | 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 
NA 


示 ， 


top.| 


<h1> 框 架 顶 部 页 面 </h1> 
</center> 
</form> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap18.2.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-2 所 

在 该 代码 中 使 用 了 <frameset> 标 记 及 两 个 <frame> 标 记 组 成 了 一 个 框架 页 面 ， 其 中 显示 在 框架 顶部 的 是 
html 文件 ， 显 示 在 框架 边框 以 下 的 是 nain html 文件 。 

单 击 “ 窗 口 框架 ”按钮 ， 即 可 看 到 当前 窗口 所 在 框架 的 名 称 信息 ， 如 图 18-3 所 示 。 


ee lr 上 
文件 (篇 吊 (F)】 豆 硬 V) 收 天 =A) 工具 (T) 娠 ab 
框架 项 部 页 面 
显示 框架 页 面 的 内 容 


BEL 


来 SR 的 消 尼 


A 窗口 所 在 在 的 全 各 :mainFrame 


EE 


EH] 
图 18-2 含有 窗口 框架 的 网 页 图 18-3 显示 当前 窗口 所 在 框架 的 名 称 


单 击 “ 确 定 ”按钮 ， 即 可 看 到 打开 窗口 数量 的 提示 信息 ， 如 图 18-4 所 示 。 
如 果 单 击 “打开 窗口 ”按钮 ， 即 可 转 到 链接 的 页 面 中 ， 如 图 18-5 所 示 。 


Dea 下 
文件 人。 钨 委 ( 查 署 (/) 。 收 基 空 (A) 工具 其 动 (H) 
来 所 网 页 的 消息 x 框 架 顶 部 页 面 
A enweesa:o 
Ce io 
图 18-4 显示 当前 窗口 的 框架 数量 图 18-5” 跳 转 到 链接 页 面 


3. parent 属性 
parent 属性 返回 当前 窗口 的 父 窗口 。 语 法 格式 如 下 : 
window.parent 


【 例 18-3】〔 实 例文 件 ，ch18\Chap18.3.html》parent 属性 应 用 实例 。 


<!DocTYPE html> 

<html> 

<head> 

<title>parent 属性 的 应 用 </title> 
</head> 

<head> 


<script> 
function openWin(){ 
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相关 的 代码 实例 请 参考 Chap18.3.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 18-6 所 示 。 
单 击 “打开 窗口 ”按钮 ， 即 可 打开 新 窗口 ， 并 在 父 窗口 弹出 警告 提示 框 ， 如 图 18-7 所 示 。 


R100% 
图 18-6 parent 属性 的 应 用 图 18-7 警告 提示 杠 
4. top 属性 


当 页 面 中 存在 多 个 框架 时 , 可 以 使 用 window 对 象 的 top 属性 直接 获取 当前 浏览 器 窗口 中 各 子 窗口 的 最 
顶层 对 象 。 其 语法 格式 为 : 


| 
【 例 18-4】 实例 文件 ，ch18\Chap18.4.html》top 属性 应 用 实例 。 
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相关 的 代码 实例 请 参考 Chap18.4.html 文件 ， 然 后 双 


所 示 。 
单 击 “ 检 查 窗口 ”按钮 ，check0 函 数 被 调 月 
如 图 18-9 所 示 。 


6 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-8 


， 检 查 当前 窗口 的 状态 ， 并 在 网 页 中 输入 窗口 的 状态 信息 ， 


豆 ” 芝 


关 CNUsers\qiangu\Doc 月 ~ C 上 夸 恰 查 当前 宣 口 的 状态 
文件 () 忽 岛 (E) ”查看 (V) 收藏 夫 (A) 工具 (T) 帮助 (H) 


百 流 
司 cAUsers\qiangu\Doc -0 | 居 cAUsers\qiangu\Dol 


© 


文件 (站 ”久久 (E) 二 看 (V) 收藏 失 (A) 工具 TT 帮助 (H) 


检查 窗口 


18-8 检查 当前 窗口 的 状态 


18.1.2 window 对 象 方法 


这 个 窗口 是 最 顶层 窗口 ! 


图 18-9 显示 检查 的 结果 


除了 对 象 属性 外 ，window 对 象 还 拥有 很 多 方法 。window 对 象 常用 的 方法 及 描述 如 表 18-2 所 示 。 
表 18-2 window 对 象 常用 的 方法 及 描述 


方 法 描 述 
alert0 显示 带 有 一 段 消息 和 一 个 确认 按钮 的 警告 框 
blur0 把 键盘 焦点 从 顶层 窗口 移 开 
clearInterval() 取消 由 setInterval0 方 法 设置 的 timeout 
clearTimeout() 取消 由 setTimeout0 方 法 设置 的 timeout 
alose0 关闭 浏览 器 窗口 
confirm() 显示 带 有 一 段 消息 以 及 确认 按钮 和 取消 按钮 的 对 话 框 
createPopupO 创建 一 个 pop-up 窗口 
focus0 把 键盘 焦点 给 予 一 个 窗口 
moveBy0 可 相对 窗口 的 当前 坐标 把 它 移动 指定 的 像素 
moveTo() 把 窗口 的 左上 角 移动 到 一 个 指定 的 坐标 
open0 打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 
print0 打印 当前 窗口 的 内 容 
promptO 显示 可 提示 用 户 输入 的 对 话 框 
resizeByO 按照 指定 的 像素 调整 窗口 的 大 小 
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续 表 


村 描 述 


resizeTo() 把 窗口 的 大 小 调整 到 指定 的 宽度 和 高 度 

scrollByO 按照 指定 的 像素 值 来 滚动 内 容 

scrollTo0 把 内 容 滚动 到 指定 的 坐标 

setIntervalO | 按照 指定 的 周期 〈 以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 
setTimeoutO 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 


18.2 ”打开 与 关闭 窗口 


窗口 的 打开 与 关闭 主要 是 通过 使 用 open0 和 close0 方 法 来 实现 ， 也 可 以 在 打开 窗口 时 指定 窗口 的 大 小 
及 位 置 。 本 节 介绍 打开 与 关闭 窗口 的 实现 方法 。 


18.2.1 JavaScript 打开 窗口 
使 用 open0 方 法 可 以 打开 一 个 新 的 浏览 器 窗口 或 查找 一 个 已 命名 的 窗口 。 语 法 格式 如 下 : 


window.open (URL, name, specs, replace) 

参数 说 明 如 下 。 

URL: 可 选 。 打 开 指 定 的 页 面 的 URL， 如 果 没 有 指定 URL， 打 开 新 的 空白 窗口 。 
name: 可 选 。 指 定 target 属性 或 窗口 的 名 称 ， 支 持 的 值 如 表 18-3 所 示 。 


表 18-3 name 可 选 参数 及 说 明 
可 选 参数 说 明 


_blank URL 加 载 到 一 个 新 的 窗口 ， 这 是 默认 值 
_parent URL 加 载 到 父 框架 

_self URL 替换 当前 页 面 

_top URL 替换 任何 可 加 载 的 框架 集 


name 窗口 名 称 


specs， 可 选 。 一 个 逗号 分 隔 的 项 目 列表 ， 支 持 的 值 如 表 18-4 所 示 。 
表 18-4 specs 可 选 参数 及 说 明 


可 选 参数 说 明 
channelmode=yeslnolll0 是 否 要 在 影院 模式 显示 window， 默 认 是 没有 的 。 仅 限 正 浏览 器 
ee | 是 天 添加 录 按 钮 。 加 认 是 肯定 的 ， 仅 限 焉 训 览 器 
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续 表 
可 选 参 数 说 明 
i OR 默认 是 没有 的 ， 在 全 屏 模 式 下 的 window， 还 必须 在 影院 模式 。 
限 正 浏览 器 
height-pixels 窗口 的 高 度 ， 最 小 值 为 100 
lefi=pixels 该 窗口 的 左 侧 位 置 
location=yeslnolll0 是 否 显示 地 址 字段 ， 默 认 值 是 yes 
menubar=yeslnolll0 是 否 显示 菜单 栏 ， 默 认 值 是 yes 
resizable=yeslnolll0 是 否 可 调整 窗口 大 小 ， 默 认 值 是 yes 
scrollbars=yeslnol1l0 是 否 显示 滚动 条 ， 默 认 值 是 yes 
status=yeslnol1l0 是 否 要 添加 一 个 状态 栏 ， 默 认 值 是 yes 
tilebaryesinolllO 和 被 忽略 ， 除 非 调 用 HTML 应 用 程序 或 一 个 值得 信赖 的 对 话 框 ， 默 认 值 
toolbar=yeslnolll0 是 否 显示 浏览 器 工具 栏 ， 默 认 值 是 yes 
top=pixels 窗口 顶部 的 位 置 ， 仅 限 正 浏览 器 
width=pixels 窗口 的 宽度 ， 最 小 值 为 100 


replace Optional.Specifies 规定 了 装载 到 窗口 的 URL 是 在 窗口 的 浏览 历史 中 创建 一 个 新 条 目 ， 还 是 替换 
浏览 历史 中 的 当前 条 目 ， 支 持 的 值 如 表 18-5 所 示 。 


表 18-5 replace 可 选 参 数 及 说 明 


URL 替换 浏览 历史 中 的 当前 条 目 
URL 在 浏览 历史 中 创建 新 的 条 目 


【 例 18-5】 (实例 文件 ，chl8\Chap18.5.html) 直接 打开 新 窗口 。 


<!DocTYPE html> 
<html> 
<head> 
<title> 直 接 打开 新 窗口 </title> 
<script> 
window.open('','', 'width=200,height=100"); 
</script> 
</head> 
<body> 
<p> 这 是 ' 我 的 新 窗口 '</p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap18.5.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-10 
所 示 ， 其 中 空白 页 就 是 直接 打开 的 窗口 。 
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这 是 ' 我 的 新 窗口 | 等 Se -ec 一 


00% ~ 


图 18-10 直接 打开 新 窗口 
【 例 18-6】 (实例 文件 ，ch18\Chap18.6.html》 通 过 单 击 按钮 打开 新 窗口 。 


<!DOCTYPE html> 
<html> 
<head> 


<title> 通 过 按钮 打开 新 窗口 </title> 


<script> 


function open win() { 
window.open ("http://www.baidu.com"); 
. 
</script> 
</head> 
<body> 
<form> 
<input type="button" value=" 打 开 窗 口 ” onclick="open win()"> 
</form> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap18.6.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-11 
所 示 。 


- D x 
©@ 司 CAUsers\qiangu\Doc 只 -上原 天 过 按 得 打 开 新 窜 口 
文件 (站 编 有 6) 查看 (V) 收藏 亦 (A) 工具 (T) 。 帮助 (H) 


打开 窗口 


图 18-11 通过 单 击 按钮 打开 新 窗口 


单 击 “ 打 开 窗 口 ”按钮 ， 即 可 直接 在 新 窗口 中 打开 百度 网 站 的 首页 ， 如 图 18-12 所 示 。 

注意 : 在 使 用 open0 方 法 时 ， 需 要 注意 以 下 几 点 。 

通常 浏览 器 窗口 中 ， 总 有 一 个 文档 是 打开 的 ， 因 为 不 需要 为 输出 建立 一 个 新 文档 。 

在 完成 对 Web 文档 的 写 操作 后 ， 要 使 用 或 调用 close() 方 法 来 实现 对 输出 流 的 关闭 。 

在 使 用 open() 方 法 打开 一 个 新 流 时 ,可 为 文档 指定 一 个 有 效 的 文档 类 型 ,有 效 文档 类 型 包括 text/HTML、 
text/gif、text/xim 等 。 
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18-12 直接 在 新 窗口 中 打开 页 面 


2.2 ” JavaScript 关闭 窗口 


用 户 可 以 在 JavaScript 中 使 用 window 对 象 的 close0 方 法 关闭 指定 的 已 经 打开 的 窗口 。 语 法 格式 如 下 : 


window.close() 
例如 ， 如 果 想 要 关闭 窗口 ， 可 以 使 用 下 面 任 何 一 种 语句 来 实现 。 


window.close() 
close() 
this.close() 


下 面 给 出 一 个 实例 ， 首 先 用 户 通过 Window 对 象 的 open0 方 法 打开 一 个 新 窗口 ， 然 后 通过 按钮 再 关闭 
该 窗口 。 


【 例 18-7】 (实例 文件 :chl8\Chap18.7.html) 关闭 新 窗口 。 


<!DocTYPE html> 
<html> 
<head> 
<title> 关 闭 新 窗口 </title> 
<script> 
function openwin(){ 
myWindow=window-open ("","", "width=200, height=100"); 
myWindow.document .write ("<p> 这 是 ' 我 的 新 窗口 '</p>"); 
} 
function closewin(){ 
myWindow.close(); 
} 
</script> 
</head> 
<body> 
<input type="button” value=" 打 开 我 的 窗口 ”onclick="openWin()” /> 
<input type="button" value=" 关 闭 我 的 窗口 ” onclick="closewin()” /> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap18.7.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 


所 示 。 
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行 的 结果 如 图 18-13 
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单 击 “打开 我 的 窗口 ”按钮 ， 即 可 直接 在 新 窗口 中 打开 我 的 窗口 ， 如 图 18-14 所 示 。 


一 口 x 
ET D - 0 | 辣 NND 
文件 (月 ” 舌 辐 (E) 可 看 (V) 收藏 夫 (A) 工具 (T) 孝 肥 (H] 


打开 我 的 窗口 | | 关闭 我 的 宣 口 是 c\usersqia.. 一 
这 是 我 的 新 窗口 ' 
R100% ~ 
图 18-13 运行 结果 图 18-14 直接 在 新 窗口 中 打开 我 的 窗口 
单 击 “ 关 闭 我 的 窗口 ”按钮 ， 即 可 关闭 打开 的 新 窗口 ， 如 图 18-15 所 示 。 


- OO x 
司 cAUsers\qiangu\Doc P - © BDO 
文件 (六 纺 (E) 查看 (V) 收藏 夫 A) 工具 [T) 夸 (H) 


EE 


成 100% > 


18-15 ”关闭 新 窗口 
提示 : 在 JavaScript 中 使 用 window-.close( 方 法 关闭 当前 窗口 时 ， 如 果 当 前 窗口 是 通过 JavaScript 打开 
的 ， 则 不 会 有 提示 信息 。 在 某 些 浏览 器 中 ， 如 果 打 开 需 要 关闭 窗口 的 浏览 器 只 有 当前 窗口 的 历史 访问 记录 ， 
使 用 window.close() 关 闭 窗口 时 ， 同 样 不 会 有 提示 信息 。 


18.3 ”操作 窗口 对 象 


通过 window 对 象 除了 可 以 打开 与 关闭 窗口 外 ， 还 可 以 控制 窗口 的 大 小 和 位 置 ， 下 面 进行 详细 介绍 。 


18.3.1 改变 窗口 大 小 
利用 window 对 象 的 resizeBy( 方 法 可 以 根据 指定 的 像素 来 调整 窗口 的 大 小 ， 具 体 语法 格式 如 下 ; 


resizeBy(width,height) 
参数 说 明 如 下 。 

width: 必需 。 要 使 窗口 宽度 增加 的 像素 数 ， 可 以 是 正 、 负 数值 。 

height: 可 选 。 要 使 窗口 高 度 增加 的 像素 数 ， 可 以 是 正 、 负 数值 。 

注意 : 此 方法 定义 指定 窗口 的 右 下 角 移 动 的 像素 ， 左 上 角 将 不 会 被 移动 ( 它 停 留 在 其 原来 的 坐标 ) 。 
【 例 18-8】〔 实 例文 件 ，ch18\Chap18.8.html) 改 变 窗口 大 小 。 

<!DOCTYPE html> 


<html> 
<head> 
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Chap18.8.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-16 


“调整 窗口 ”按钮 ， 即 可 改变 窗口 的 大 小 ， 如 图 18-17 所 示 。 


图 18-16 改变 窗口 大 小 图 18-17 通过 按钮 调整 窗口 大 小 


8.3.2 ”移动 窗口 位 置 


使 用 moveTo0 方 法 可 把 窗口 的 左上 角 移动 到 一 个 指定 的 坐标 。 语 法 格式 如 下 : 
Window-moveroGt 

下 面 给 出 一 个 实例 ， 将 新 窗口 移动 到 屏幕 左上 角 。 

【 例 18-9】 (实例 文件 ，ch18\Chap18.9.html) 移动 窗口 位 置 。 
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<input type="button"” value=" 打 开 窗 口 ” onclick="openwin()”/> 
<br><br> 
<input type="button"” value=" 移 动 窗 D" onclick="moveWin()" /> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap18.9.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-18 
所 示 。 
单 击 “打开 窗口 ”按钮 ， 即 可 打开 一 个 新 的 窗口 ， 如 图 18-19 所 示 。 


= 六 
图 cluserseiargupoe -上 | 本 BEDEE 


文科 需 下 和 三 看 V) 可 (工具 元 (H) 感 c\users\qia.. 一 XX 


[|] 这 是 我 的 新 窗口 


| #0 | 


图 18-18 ”移动 窗口 位 置 图 18-19 打开 新 的 窗口 
单 击 “ 移 动 窗口 ”按钮 ， 即 可 将 打开 的 新 窗口 移动 到 桌面 的 左上 角 ， 如 图 18-20 所 示 。 


车 cusersqis-。 一 
这 是 我 的 新 窗口 


图 18-20 ”移动 窗口 到 桌面 左上 角 


18.4 获取 窗口 历史 记录 


利用 history 对 象 可 以 获取 窗口 历史 记录 ，history 对 象 是 一 个 只 读 URL 字符 串 数组 ， 该 对 象 主要 用 来 
存储 一 个 最 新 所 访问 网 页 的 URL 地 址 的 列表 ， 可 通过 window.history 属性 对 其 进行 访问 。 
history 对 象 常用 的 属性 及 描述 如 表 18-6 所 示 。 


表 18-6 ” history 对象 常 用 的 属性 及 描述 


属 性 描 述 
length 返回 历史 列表 中 的 网 址 数 
curmrent 当前 文档 的 URL 

next 历史 列表 的 下 一 个 URL 
previous 历史 列表 的 前 一 个 URL 


history 对 象 常用 的 方法 及 描述 如 表 18-7 所 示 。 
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表 18-7 history 对 象 常用 的 方法 及 描述 


方 法 描述 

back0 加 载 history 列表 中 的 前 一 个 URL 
forward0 加 载 history 列表 中 的 下 一 个 URL 
go0 加 载 history 列表 中 的 某 个 具体 页 面 


注意 : 当前 没有 应 用 于 history 对 象 的 公开 标准 ， 不 过 所 有 浏览 器 都 支持 该 对 象 。 
例如 , 利用 history 对 象 中 的 back0 方 法 和 forward0 方 法 可 以 引导 用 户 在 页 面 中 跳 转 , 具体 的 代码 如 下 : 


<a href="javascrip:window.history.forward();">forward</a> 
<a href="javascrip:window.history.back();">back</a> 


还 可 以 使 用 history.go0 方 法 指定 要 访问 的 历史 记录 ， 若 参数 为 正 数 ， 则 向 前 移动 ， 或 参数 为 负数 ， 则 
向 后 移动 ， 具 体 代码 如 下 : 


<a href="javascrip:window.history.go(-1);"> 向 后 退 一 次 </a> 
<a href="javascrip:window.history.back(2);"> 向 后 前 进 两 次 </a> 


使 用 history.Length0 属 性 能 够 访问 history 数组 的 长 度 ， 可 以 很 容易 地 转移 到 列表 的 末尾 ， 例 如 


<a href="javascrip:window.history.go (window-historylength-1) "> 末尾 </a> 


18.5 窗口 定时 器 


用 户 可 以 设置 一 个 窗口 在 某 段 时 间 后 执行 何 种 操作 ， 这 被 称 为 窗口 定时 器 ， 使 用 window 对 象 中 的 
setTimeout0 方 法 可 以 在 指定 的 毫秒 数 后 调用 函数 或 计算 表达 式 ， 用 于 设置 窗口 定时 器 。 语 法 格式 如 下 : 


setTimeout (code, milliseconds, paraml, param?2, ...) 
setTimeout (function, milliseconds, paraml, param2, ...) 


下 面 给 出 一 个 实例 ， 单 击 “ 开 始 ”按钮 ，3 秒 后 弹出 “Hello” 信 息 提 示 框 。 
【 例 18-10】 实例 文件 ，ch18\Chap18.10.html》3 秒 后 弹出 “Hello” 信 息 提示 框 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 弹 出 "Hello" 信 息 提示 框 </title> 
</head> 

<body> 

<p> 单 击 "开始 "按钮 ,3 秒 后 会 弹出 "Hello"。</p> 
<button onclick="myFunction()"> 开 始 </button> 
<script> 

var myVar; 

function myFunction() { 


myVar = setTimeout (alertFunc，3000);  // 调 用 setTimeout 方法 指定 3 秒 数 后 调用 函数 或 计算 表达 式 


} 

function alertFunc() { 
alert ("Hello!™"); 

站 

</script> 
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相关 的 代码 实例 请 参考 Chap18.10.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-21 


单 击 “ 开 始 ”按钮 ，3 秒 后 弹出 “Hello” 信 息 提示 框 ， 如 图 18-22 所 示 。 


单 击 【 开 始 ] 按 钙 ，3 秒 后 会 弹出 "Hall0”。 


图 18-21 ”网 页 运行 结果 图 18-22 弹出 信息 提示 框 
下 面 再 给 出 一 个 实例 ， 单 击 “ 开 始 计 数 ” 按 钮 开始 执行 计数 程序 。 输 入 框 从 0 开始 计算 。 单 击 “ 停 止 
计数 ”按钮 停止 计数 ， 当 再 次 单 击 “ 开 始 计数 ”按钮 时 会 重新 开始 计数 。 
【 例 18-11】〈 实 例文 件 ，chl8\Chap18.11.html》 网 页 计数 器 。 
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相关 的 代码 实例 请 参考 Chap18.11.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-23 
所 示 。 
单 击 “ 开 始 计数 !” 按 钮 ， 即 可 在 文本 框 中 显示 计数 信息 ， 如 图 18-24 所 示 。 


二 ox 
闻 GheerionguDoc P ~ | 司 Ft [< BETTE 
文件 中 病 重 (E) 得 吾 (V) 收藏 夫 (A) 工兵 (T) 。 帮 动 人 ) 文件 站。 状 轧 [E) 查看 (V) 上 惧 潭 天 A) 工具 站 大 动 (H) 
开始 计数 | | 优 止 守 玫 : 开 铝 计数 日 停止 计数 
大 100% 或 100% vv 
18-23 ”网 页 计数 器 18-24 ”在 文本 框 中 显示 计数 信息 


单 击 “ 停 止 计数 !” 按 钮 ， 即 可 停止 开始 计数 ， 如 图 18-25 所 示 。 


当 再 次 单 击 “ 开 始 计数 !” 按 钮 ， 即 可 继续 开始 计数 ， 如 图 18-26 所 示 。 
画 CWSRWRROAD DC i @ 国 CenanoDot D7 0 二 上 
广 H 交 日 下 Mk， 工 Rn RH 区 
am [ES 一 人 
3 
成 100% 急 100% 
图 18-25 停止 计数 图 18-26 开始 计数 


18.6 ”JavaScript 对 话 框 


对 话 框 是 网 页 与 浏览 者 进行 交流 的 桥梁 ， 具 有 提示 、 选 择 和 获取 信息 的 功能 。JavaScript 提供 了 三 个 标 
准 的 对 话 框 ， 分 别 是 弹出 对 话 框 、 选 择 对 话 框 和 输入 对 话 框 ， 这 三 个 对 话 框 都 是 基于 window 对 象 产生 ， 
即 作为 window 对 象 的 方法 而 使 用 的 。 

window 对 象 中 的 对 话 框 如 表 18-8 所 示 。 


表 18-8 window 对 象 的 对 话 框 
对 话 框 说 明 
alertO 弹出 一 个 只 包含 “确定 ”按钮 的 对 话 框 


弹出 一 个 包含 “确定 ”和 “取消 ”按钮 的 对 话 框 ， 要 求 用 户 做 出 选择 。 如 果 用 户 单 击 “确定 ”按钮 ， 
则 返回 true 值 ， 如 果 单 击 “ 取 消 ”按钮 ， 则 返回 false 值 


confirm() | 


弹出 一 个 包含 “确认 ”按钮 和 “取消 ”按钮 和 一 个 文本 框 的 对 话 框 ， 要 求 用 户 在 文本 框 输入 一 些 数 
prompt() 据 。 如 果 用 户 单 击 “ 确 认 ” 按 钮 ， 则 返回 文本 框 里 已 有 的 内 容 ， 如 果 用 户 单 击 “取消” 按钮 ， 则 返 
回 nul 值 。 如 果 指 定 < 初始 值 >， 则 文本 框 里 会 有 默认 值 
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18.7 调用 对 话 框 
使 用 window 对 象 中 的 方法 可 以 调用 对 话 框 ， 本 节 介 绍 调用 对 话 框 的 方法 。 


18.7.1 采用 alert() 方 法 调用 
采用 alert0 方 法 可 以 调用 警告 对 话 框 或 信息 提示 框 对 话 框 ， 语 法 格式 如 下 : 


alert (message) 
其 中 ，message 是 在 对 话 框 中 显示 的 提示 信息 。 当 使 用 alert0 方 法 打开 消息 框 时 ， 整 个 文档 的 加 载 以 及 所 有 
脚本 的 执行 等 操作 都 会 暂停 ， 直 到 用 户 单 击 消息 框 中 的 “确定 ”按钮 ， 所 有 的 动作 才 继 续 进 行 。 

【 例 18-12】 实例 文件 ，ch18\Chap18.12.html)〉 利 用 alert0 方 法 弹出 了 一 个 含有 提示 信息 的 对 话 框 。 

<!DOCTYPE HTML> 

<html> 

<head> 

<title>Windows 提示 框 </title> 

<script language="JavaSscript" type="text/javaScript"> 

window.alert ("提示 信息 "); 


function showMsg (msg) 


if (msg == "简介 ") window.alert ("提示 信息 : 简介 "); 
window.status = "显示 本 站 的 ”+ msg; 
return true; 
} 
window.defaultstatus = "欢迎 光临 本 网 站 "7 
</script> 
</head> 
<body> 
<form name="frmData" method="post" action="#"> 
<table width="400" align="center" border="1" cellspacing="0"> 
<thead> 
<th colspan="3"> 在 线 购物 网 站 </th> 
</thead> 
<script> 
window-alert ("加 载 过 程 中 的 提示 信息 ") ; 
</script> 
<tr> 
<td valign="top" width="200"> 
<ul> 
<li><a href="#" onmouseover="return showMsg(' 主 页 ')"> 主 页 </a></1i> 
<li><a href="#" onmouseover="return showMsg(' 简 介 ')"> 简 介 </a></1i> 
<li><a href="#"” onmouseover="return showMsg(' 联 系 方式 ')"> 联 系 方式 </a></1i> 
<li><a href="#"” onmouseover="return showMsg (' 业 务 介绍 ')"> 业 务 介绍 </a></1i> 
</ul> 
</td> 
<td valign="top" width="300"> 
上 网 购物 是 新 的 一 种 购物 理念 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html> 
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相关 的 代码 实例 请 参考 Chap18.12.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-27 
所 示 ， 在 上 面 代码 中 加 载 至 JavaScript 中 的 第 一 条 window.alert0 语 句 时 ， 此 时 会 弹出 一 个 提示 框 。 
单 击 “ 确 定 ” 按 钮 ， 页 面 加 载 至 table， 此 时 状态 条 已 经 显示 “欢迎 光临 本 网 站 ”的 提示 消息 ， 说 明 设 


置 状态 条 默认 信息 的 语句 已 经 执行 ， 如 图 18-28 所 示 。 


图 18-27 ”信息 提示 框 图 18-28 弹出 信息 提示 框 


再 次 单 击 “ 确 定 ” 按 钮 ， 当 鼠标 指针 移 至 超级 链接 “简介 ”时 ， 即 可 看 到 相应 的 提示 信息 ， 如 图 18-29 


所 示 。 
待 整个 页 面 加 载 完毕 ， 状 态 条 会 显示 默认 的 信息 ， 如 图 18-30 所 示 。 


- oo 
@ 图 cNusersqiangwpoc P " 0 | 匡 Windowsi 直 EE 
文 作 中 。 六 各 6， 得 看 V) 收藏 突 A) 工具 [帮助 (H) 


来 各 网 页 的 消息 x 


A sn: 


Esl fle///CsUsers/qiangu/Documerts/ 尖 /Chap11.12.html# 起 100% 


图 18-29 提示 信息 为 “简介 ” 图 18-30 ”显示 默认 信息 


18.7.2 采用 confirm() 方 法 调用 


采用 confirm() 方 法 可 以 调用 一 个 带 有 指定 消息 和 确认 及 取消 按钮 的 对 话 框 。 如 果 访 让 


按钮 ， 此 方法 返回 tue， 否 则 返回 false。 语 法 格式 如 下 : 


confirm(message) 


问 者 单 击 “ 确 定 ” 


【 例 18-13】 实例 文件 ，ch18\Chap18.13.html》〉 显 示 一 个 确认 框 ， 提 醒 用 户 单 击 了 什么 内 容 。 


<!DocTYPE html> 
<html> 
<head> 
<title> 显 示 一 个 确认 框 </title> 
</head> 
<body> 
<p> 单 击 按钮 ,显示 确认 框 。</p> 
<button onclick="myFunction() "> 确认 </button> 
<p id="demo"></p> 
<script> 
function myFunction(){ 
var x; 
var r=confirm(" 按 下 按钮 1"); 
if (r==true){ 


z=" 你 按 下 了 “确定 ”按钮 1"; 
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else{ 
z=" 你 按 下 了 “取消 ”按钮 1"; 
} 
document .getElementById ("demo") .innerHTML=x; 
’ 


</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap18.13.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-31 
所 示 。 

单 击 “ 确 认 ” 按 钮 ， 弹 出 一 个 信息 提示 框 ， 提 示 用 户 需 要 按 下 按钮 进行 选择 ， 如 图 18-32 所 示 。 


- oO * 
@ 司 cusereqianguDoc DD 睛 | 局 三 一个 而 至 
文 作 中。 入 训 晶 。 直 在 (。 改 芒 关内 工具。 帮助 


单 击 按钮 ， 旺 示 确 认 框 ， 


[BR 
大 100% 
图 18-31 显示 一 个 确认 框 图 18-32 信息 提示 框 
单 击 “ 确 定 ”按钮 ， 返 回 到 页 面 中 ， 可 以 看 到 在 页 面 中 显示 了 用 户 单 击 了 “确定 ”按钮 ， 如 图 18-33 


所 示 。 
如 果 单 击 了 “取消 ”按钮 ， 返 回 到 页 面 中 ， 可 以 看 到 在 页 面 中 显示 了 用 户 单 击 了 “取消 ”按钮 ， 如 图 


18-34 所 示 。 


国 cusersqiangupocP ~ © 站 辣 cueersqiengwpocP -© 2 
文 林 月。 多 台 日 要 看。 改天 夫 AJ。 工具 大 二 HI | NV) CA IRM WH) 
单 击 按钮 ， 显 示 确 认 框 。 单 击 按钮 ， 显 示 确 认 框 。 
En ax] 
你 按 下 了 “确定 ”按钮 ! 你 按 下 了 “取消 ”按钮 : 
所 oox ~ 100% ~ 
18-33 ” 单 击 “确定 ”按钮 后 的 提示 信息 18-34” 单 击 “ 取 消 ” 按 钮 后 的 提示 信息 


18.7.3 采用 prompt() 方 法 调用 


可 
采用 prompt0 方 法 可 以 在 浏览 器 窗口 中 弹出 一 个 提示 框 ， 与 警告 框 和 确认 框 不 同 ， 在 提示 框 中 会 有 一 个 
文本 框 。 当 显示 文本 框 时 ， 在 其 中 显示 提示 字符 串 ， 并 等 待 用 户 输 入 ， 当 用 户 在 该 文本 框 中 输入 文字 后 ， 并 
单 击 “ 确 定 ”按钮 时 ， 返 回 用户 输 入 的 字符 串 ， 当 单 击 “取消 ”按钮 时 ， 返 回 null 值 。 语 法 格式 如 下 : 


prompt (msg defaultText) 
其 中 ， 参 数 msg 为 可 选项 ， 要 在 对 话 框 中 显示 的 纯 文本 而 不 是 HTML 格式 的 文本 )。defaultText 也 为 可 
选项 ， 默 认 的 输入 文本 。 

【 例 18-14】 (实例 文件 ，chlg\Chap18.14.html) 显示 一 个 提示 框 ， 并 输入 内 容 。 


<!DOCTYPE html > 
<html > 
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相关 的 代码 实例 请 参考 Chap18.14.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-35 
单 击 “确定 ”按钮 ， 弹 出 一 个 信息 提示 框 ， 提 示 用 户 在 文本 框 中 输入 数字 ， 这 里 输入 “1010”， 如 图 
18-36 所 示 。 


图 18-35 ”运行 结果 图 18-36 输入 数字 
单 击 “ 确 定 ” 按 钮 ， 弹 出 一 个 信息 提示 框 ， 提 示 用 户 输入 了 数字 ， 如 图 18-37 所 示 。 
如 果 没 有 输入 数字 ， 直 接 单 击 “ 确 定 ” 按 钮 ， 则 在 弹出 的 信息 提示 框 中 提示 用 户 还 没有 输入 数字 ， 如 
图 18-38 所 示 。 
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mnie 二 的 和 站 
A sxmsssm， A ss 
Ce ] 
图 18-37 ”提示 用 户 输入 了 数字 图 18-38 ”提示 用 户 还 没 输入 数字 


注意 : 使 用 window 对 象 的 alert0 方 法 、confirm() 方 法 、prompt0 方 法 都 会 弹出 一 个 对 话 框 ， 并 且 在 对 话 
框 弹出 后 ， 如 果 用 户 没有 对 其 进行 操作 ， 那 么 当前 页 面 及 JavaScript 会 暂停 执行 . 这 是 因为 使 用 这 3 种 方法 弹 
出 的 对 话 框 都 是 模式 对 话 框 ， 除 非 用 户 对 对 话 框 进行 操作 ， 否 则 无 法 进行 其 他 应 用 ， 包 括 无 法 操作 页 面 。 


18.8 其 他 


Browser 对 象 除了 包含 window 对 象 外 ， 还 具有 其 他 对 象 ， 如 用 于 统计 浏览 器 信息 的 Navigator 对 象 、 
用 于 统计 屏幕 信息 的 Screen 信息 等 ， 本 节 就 来 介绍 一 些 其 他 的 Browser 对 象 。 


18.8.1 Location 对象 


Location 对 象 是 window 对 象 的 一 部 分 ， 可 通过 window.Location 属性 对 其 进行 访问 。Location 对 象 常 
用 的 属性 及 描述 如 表 18-9 所 示 。 


表 18-9 ”Location 对象 常用 的 属性 及 描述 
属 性 描述 


hash 返回 一 个 URL 的 锚 部 分 

host 返回 一 个 URL 的 主机 名 和 端口 
hostname 返回 URL 的 主机 名 

href 返回 完整 的 URL 

pathname 返回 的 URL 路 径 名 

port 返回 一 个 URL 服务 器 使 用 的 端口 号 
Protocol 返回 一 个 URL 协议 

search 返回 一 个 URL 的 查询 部 分 


Location 对 象 常用 的 方法 及 描述 如 表 18-10 所 示 。 
表 18-10 ”Location 对 象 常用 的 方法 及 描述 


方 法 描 述 
assign() 载 入 一 个 新 的 文档 
reload0 重新 载 入 当前 文档 
replace0 用 新 的 文档 替换 当前 文档 
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Location 对 象 使 用 较 多 的 是 replace() 方 法 ， 使 用 该 方法 可 以 将 当前 文档 替换 为 其 他 文档 。 
【 例 18-15】 〈 实 例文 件 ，chlg\Chap18.15 html) 使 用 新 的 文档 替换 当前 文档 。 


<!DocTYPE html> 
<html> 
<head> 
<title> 替 换 当前 文档 </title> 
<script> 
function replaceDoc(){ 
window.1location.replace ("http://www.baidu.com") 
} 
</script> 
</head> 
<body> 
<input type="button"” value=" 载 入 新 文档 替换 当前 页 面 " onclick="replaceDoc()"> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap18.15.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-39 
所 示 。 
单 击 “ 载 入 新 文档 替换 当前 页 面 ”按钮 ， 就 可 使 用 百度 网 页 替换 当前 的 页 面 ， 如 图 18-40 所 示 。 


= 
@ Es oS ® 
pp MD EM BRN IR WM 


0 ho ji a MP 4k SE is | 


a 6960 
| CT BaikD 百 度 
目 文件 个 妃 赋 (E) 到 看 (V) 收藏 交 (A) 工具 (D) 帮助 (H) 
EE 本 5 = 一 | 
或 100% 二 1008 ~。 
图 18-39 ”运行 结果 图 18-40 ” 蔡 换 了 当前 的 页 面 


18.8.2” Navigator 对 象 


Navigator 对 象 包含 有 关 浏 览 器 的 信息 。Navigator 对 象 常用 的 属性 及 描述 如 表 18-11 所 示 。 
表 18-11 Navigator 对 象 常用 的 属性 及 描述 


属 性 描述 
appCodeName 返回 浏览 器 的 代码 名 
appName 返回 浏览 器 的 名 称 
appVersion 返回 浏览 器 的 平台 和 版 本 信息 
cookieEnabled 返回 指明 浏览 器 中 是 否 启用 cookie 的 布尔 值 
Platform 返回 运行 浏览 器 的 操作 系统 平台 
userAgent 返回 由 客户 机 发 送 服务 器 的 user-agent 头 部 的 值 
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Navigator 对 象 常用 的 方法 及 描述 如 表 18-12 所 示 。 
表 18-12 ”Navigator 对 象 常用 的 方法 及 描述 


javaEnabledO 指定 是 否 在 浏览 器 中 启用 Java 


taintEnabledO 规定 浏览 器 是 否 启用 数据 污点 (data tainting) 


Navigator 对 象 的 使 用 可 以 统计 当前 浏览 器 的 基本 信息 ， 如 代码 名 、 名 称 、 版 本 信息 等 。 
【 例 18-16】〈 实 例文 件 ，ch18\Chap18.16.html) 统计 当 前 浏览 器 的 信息 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 统 计 浏览 器 信息 </title> 
</head> 

<body> 


<div id="example"></div> 
<script> 
txt = "<p> 浏 览 器 代号 : " + navigator.appCodeName + "</p>"; 
txt+= "<p> 浏 览 器 名 称 : " + navigator.appName + "</p>"; 
txt+= "<p> 浏 览 器 版 本 : " + navigator.appVersion + "</p>"; 
txt+= "<p> 启 用 Cookies: " + navigator.cookieEnabled + "</p>"; 
txt+= "<p> 硬 件 平台 : " + navigator.platform + "</p>"; 
txt+= "<p> 用 户 代 理 : " + navigator.userAgent + "</p>"; 
txt+= "<p> 用 户 代理 语言 : " + navigator.systemLanguage + "</p>"; 
document .getElementById ("example") .innerHTML=txt; 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap18.16.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-41 
所 示 。 


- 0 x 
闻 Cheer\qanguDocumentsiRNCheF 记忆 | 本 三 加 

文 六 月 ， 交 吉日， 坦 看 M) BA 工 RD。 和 

训 览 器 代号 : bzilla A 


际 : Netscaps 


Windows NT 10.0. WOW64; Tri 
NET CLR 


NET4. 0C; , NET4. OE; ,NET 
LCTE; rv:11.0) like Gecko 


0; .NET4 GC; .NET4 OE 
29; LCTE; rw:11.0) like 


用 户 代理 语言 ; zh-CN ~ 


图 18-41 统计 浏览 器 信息 
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18.8.3 ”Screen 对 象 
Screen 对 象 包含 有 关 客 户 端 显示 屏幕 的 信息 。Screen 对 象 常用 的 属性 及 描述 如 表 18-13 所 示 。 
表 18-13 ”Screen 对 象 常用 的 属性 及 描述 


属 性 描 述 

availHeight 返回 屏幕 的 高 度 ( 不 包括 Windows 任务 栏 ) 
availWidth 返回 屏幕 的 宽度 不 包括 Windows 任务 栏 ) 
colorDepth 返回 目标 设备 或 缓冲 器 上 的 调 色 板 的 比特 深度 
height 返回 屏幕 的 总 高 度 

pixelDepth 返回 屏幕 的 颜色 分 辨 率 〈 每 像素 的 位 数 ) 
width 返回 屏幕 的 总 宽度 


使 用 Screen 对 象 的 属性 可 以 统计 当前 屏幕 的 基本 信息 ， 如 屏幕 宽度 、 高 度 等 。 
【 例 18-17】〈 实 例文 件 : ch1g\Chap18.17.html) 统计 当前 屏幕 的 信息 。 


<!DocTYPE html> 
<html> 

<head> 

<title> 屏 幕 的 基本 信息 </title> 

</head> 

<body> 

<h3> 您 当前 的 屏幕 信息 :</h3> 

<script> 

document .write ("总 宽度 /高 度 : "); 

document .write(screen.width + "*" + screen.height); 
document .write ("<br>"); 
document .write ("可 以 宽度 /高 度 : "); 

document .write (screen.availWidth + "*" + screen.availHeight); 
document .write ("<br>"); 
document .write ("颜色 深度 : "); 

document .write (screen.colorDepth); 

document .write ("<br>"); 
document .write ("颜色 分 辩 率 : "); 

document .write (screen.pixelDepth); 

</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap18.17.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-42 
所 示 。 


ox 
< rrr 一 一 
XA a Sam CaN IRT Re) 


您 当前 的 屏幕 信息 : 


R100% ~ 


图 18-42 统计 当前 屏幕 的 信息 
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18.8.4 cookie 对 象 


cookie 用 于 存储 Web 页 面 的 用 户 信息 ， 当 Web 服务 器 向 浏览 器 发 送 Web 页 面 时 ， 在 连接 关闭 后 ， 服 
务 端 不 会 记录 用 户 的 信息 。cookie 就 是 用 于 解决 “如 何 记录 客户 端的 用 户 信 息 ”。 
当 用 户 访 问 Web 页 面 时 ， 他 的 名 字 可 以 记录 在 cookie 中 。 在 用 户 下 一 次 访问 该 页 面 时 ， 可 以 在 cookie 
中 读 取 用 户 访问 记录 。cookie 以 名 / 值 对 形式 存储 ， 代 码 如 下 : 
username=John Doe 
当 浏 览 器 从 服务 器 上 请 求 Web 页 面 时 ， 属 于 该 页 面 的 cookie 会 被 添加 到 该 请 求 中 。 服 务 端 通过 这 种 方 
式 来 获取 用 户 的 信息 。 
1. 使 用 JavaScript 创建 cookie 
JavaScript 可 以 使 用 document.cookie 属性 来 创建 、 读 取 、 删 除 cookie。JavaScript 中 ， 创 建 cookie 的 代 
码 如 下 : 
document .cookie="username=John Doe"; 
用 户 还 可 以 为 cookie 添加 一 个 过 期 时 间 (以 UTC 或 GMT 时 间 )。 默 认 情 况 下 ，cookie 在 浏览 器 关闭 
时 删除 ， 代 码 如 下 ; 
document .cookie="username=John Doe; expires=Thu，18 Dec 2013 12:00:00 GMT"; 
用 户 可 以 使 用 path 参数 告诉 浏览 器 cookie 的 路 径 。 默 认 情况 下 ，cookie 属于 当前 页 面 ， 代 码 如 下 ， 
document .cookie="username=John Doe; expires=Thu，18 Dec 2013 12:00:00 GMT; path=/"; 
2. 使 用 JavaScript 读 取 cookie 
在 JavaScript 中 ， 可 以 使 用 以 下 代码 来 读 取 cookie: 
Var x = document .cookie; 
注意 : document.cookie 将 以 字符 囊 的 方式 返回 所 有 的 cookie， 类 型 格式 如 下 : 
cookiel=value; cookie2=value; cookie3=value; 
3. 使 用 JavaScript 修改 cookie 
在 JavaScript 中 ， 修 改 cookie 类 似 于 创建 cookie， 代 码 如 下 : 
document .cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"; 


这 样 ， 旧 的 cookie 将 被 覆盖 。 


4. 使 用 JavaScript 删除 cookie 

删除 cookie 非常 简单 ， 用 户 只 需要 设置 expires 参数 为 以 前 的 时 间 即 可 ， 如 下 所 示 ， 设 置 为 Thu, 01 Jan 
1970 00:00:00 GMT: 

document .cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; 

注意 : 当 用 户 删 除 时 不 必 指 定 cookie 的 值 。 

5. JavaScript cookie 实例 

下 面 给 出 一 个 实例 ,创建 cookie 来 存储 访问 者 名 称 。 首先, 访问 者 访问 Web 页 面 ,他 将 被 要 求 填写 自己 
的 名 字 , 该 名 字 会 存储 在 cookie 中 。 访 问 者 下 一 次 访问 该 页 面 时 ,他 会 看 到 一 个 欢迎 的 消息 。 具体 步 骤 如 下 : 

在 这 个 实例 中 会 创建 3 个 JavaScript 函数 ， 第 一 个 函数 : 设置 cookie 值 的 函数 。 
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首先 ， 创 建 一 个 函数 用 于 存储 访问 者 的 名 字 ， 代 码 如 下 : 


function setCookie (cname, cvalue,exdays) 


{ 
var d= 


var expi 
document 
} 


在 上 述 代码 中 


new Date(); 
qd.setTime (d.getTime ()+(exdays*24*60*60*+1000)); 
res = "expires="+d.toGMTString (); 


-cookie = cname + "=" + cvalue + "; " + expires; 


h，cookie 的 名 称 为 cname，cookie 的 值 为 cvalue， 并 设置 了 cookie 的 过 期 时 间 expires。 


该 函数 设置 了 cookie 名 、cookie 值 、cookie 过 期 时 间 。 


第 二 个 函数 : 


获取 cookie 值 的 函数 。 


然后 ， 创 建 一 个 函数 用 户 返回 指定 cookie 的 值 ， 代 码 如 下 : 


function getCookie (cname) 


{ 
var name 
var ca= 


= cname + "="; 
document .cookie.split (';"); 


for (var i=0; i<ca.length; i++) 


榴 
var c 
e+ 
} 


= ca[il .trim(); 
-indexof (name)==0) return c.substring (name.length,c.1length); 


return ""; 


} 


在 上 述 代码 中 ，cookie 名 的 参数 为 cname。 创 建 一 个 文本 变量 用 于 检索 指定 cookie :cname + "="。 使 用 分 
号 来 分 割 document.cookie 字符 串 ， 并 将 分 割 后 的 字符 串 数组 赋值 给 ca(ca = document.cookie.split(:)。 循 环 ca 数组 
(i=0:i<ca.length;it+)， 然 后 读 取 数组 中 的 每 个 值 ， 并 去 除 前 后 空格 (c=ca[i].tim0)。 如 果 找到 cookie (cindexOf 
(name)==0)， 就 返回 cookie 的 值 (c.substring(name.length.c.length))。 如 果 没 有 找到 cookie， 则 返回 ""。 


第 三 个 函数 : 


检测 cookie 值 的 函数 。 


最 后 ， 可 以 创建 一 个 检测 cookie 是 否 创 建 的 函数 。 如 果 设 置 了 cookie， 将 显示 一 个 问候 信息 。 如 果 没 
有 设置 cookie， 将 会 显示 一 个 弹 窗 用 于 询问 访问 者 的 名 字 ， 并 调用 setCookie 函数 将 访问 者 的 名 字 存储 365 
天 ， 具 体 代码 如 下 : 


function checkCookie () // 创 建 检测 cookie 的 函数 


{ 


var username=getCookie ("username"); 


if (username!="") 


2 
alert 


} 
else 


("Welcome again " + username); 


username = prompt ("Please enter your name:",""); 
if (username!="" && username!=null) 


{ 
se 
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tCookie ("username",username, 365);  // 调 用 setCookie 函数 将 访问 者 的 名 字 存储 365 天 
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【 例 18-18】〔 实 例文 件 ，ch18\Chap18.18.html》Cookie 应 用 实例 。 


相关 的 代码 实例 请 参考 Chap18.18.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-43 
所 示 。 


0 x 
€ EE -alleen = 人 ee 


图 18-43 ”Cookie 的 应 用 
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在 弹出 的 信息 提示 框 中 输入 您 的 姓名 ， 这 里 输入 “ 张 子 寒 ”， 如 图 18-44 所 示 。 
单 击 “ 确 定 ” 按 钮 ， 即 可 返回 到 原文 档 界面 ， 再 次 运行 Chap18.18.html 文件 ， 这 时 会 弹出 一 个 信息 提 
示 框 ， 这 里 的 提示 信息 就 是 存储 在 文本 中 的 Cookie 信息 ， 如 图 18-45 所 示 。 


图 18-44 输入 用 户 姓名 图 18-45 ”信息 提示 框 


18.9 制作 询问 式 对 话 框 


制作 一 个 音乐 网 页 ， 当 访问 该 网 页 时 ， 弹 出 一 个 询问 式 对 话 框 ， 让 用 户 自己 选择 。 
步骤 1: 设计 HTML 框架 ， 具体 代码 如 下 : 


<!DOCTYPE html> 

<head> 

<title> 音 乐 网 歌曲 大 全 </title> 

<body> 

<ul> 

<li><a href="/player/6c/player 45142.html" class="songTitle"> 梦 里 水 乡 </1i> 
<li><a href="/player/6c/player_45142.html" class="songTitle"> 偏 偏 喜欢 你 </1i> 
<li><a href="/player/37/player_231495.html" class="songTitle"> 一 剪 梅 </1i> 

<li><a href="/player/1f/player_191568.html" class="songTitle" > 我 的 未 来 不 是 梦 </1i> 
<li><a href="/player/18/player_333628.html"” class="songTitle" > 美丽 的 草原 我 的 家 </1i> 
<li><a href="/player/1c/player_354761.html" class="songTitle" > 真 的 好 想 你 </1i> 
<li><a href="/player/33/player_280793.html"” class="songTitle"> 无 言 的 结局 </1i> 
<li><a href="/player/65/player_1188359.html" class="songTitle"> 一 带 一 路 过 我 家 </1i> 
<li><a hr /player/65/player_1188407.html" class="songTitle"> 做 个 座 人 的 小 妖精 </1i> 
<li><a href="/player/c7/player_161257.html"” class="songTitle" > 万 水 千 山 总 是 情 </1i> 
<li><a href="/player/d8/player_53004.html" class="songTitle"> 花 儿 为 什么 这 样 红 </1i> 
<li><a href="/player/3c/player_216341.html" class="songTitle" > 康定 情歌 </1i> 
<li><a href="/player/65/player_118402.html"” class="songTitle"> 不 要 再 来 伤害 我 </1i> 
<li><a hr /player/d3/player_1066957.html"” class="songTitle"” > 小 苹果 </1i> 
<li><a href="/player/65/player_1188322.html” class="songTitle"> 浪 子 心声 </1i> 
<li><a href="/player/65/player_1188400.html" class="songTitlen> 笑 笑 </1i> 

<li><a href="/player/65/player_1188417.html” class="songTitle"> 真 的 爱 你 </1i> 
<li><a href="/player/17/player_433403.html"” class="songTitle"> 永 远 有 个 你 </1i> 
<li><a href="/player/65/player_1188354.html" class="songTitle"> 命 车 琴 弦 </1i> 
<li><a href="/player/65/player_1188360.html" class="songTitle" > 使 者 </1i> 


</ul> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap18.19.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-46 
所 示 。 
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而 cvseraqanaDoc ~ 0 | 辣 译 F SB | 
文件 加 轿 重 旧 。 豆 豆 (V) 收 雪 天 (A) 工具 (MT 帮助 (H 
R100% ~ 
图 18-46 运行 结果 
步骤 2: 在 页 面 中 添加 JavaScript 代码 ， 弹 出 询问 式 对话 框 ， 具 体 代码 如 下 : 


<script language="javascript"> 
var bool = window.confirm(" 你 是 音乐 爱好 者 吗 ? "); 


if(bool == true){ // 如 果 用 户 单 击 了 确定 按钮 
alert ("欢迎 您 来 听 音 乐 ! "); 
}else{ 


alert ("再 见 ,欢迎 下 次 光临 ! "); 
</script> 


相关 的 代码 实例 请 参考 Chap18.19.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 18-47 
所 示 ， 这 里 弹出 一 个 询问 式 对 话 框 ， 询 问 用 户 是 不 是 音乐 爱好 者 。 


18-47 询问 式 对 话 框 
单 击 “确定 ”按钮 ， 弹 出 “欢迎 您 来 听 音 乐 ” 如 图 18-48 所 示 。 


18-48 ”欢迎 信息 提示 框 
如 果 单 击 “ 取 消 ”按钮 ， 将 弹出 “再 见 ， 欢 迎 下 次 光临 !” 信 息 提示 框 ， 如 图 18-49 所 示 。 
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面试 官 : 
应 聘 者 : 


18.10.2 


面试 官 : 
应 聘 者 : 
下 来 再 讨论 。 
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图 18-49 再见 信息 提示 框 


18.10 “就业 面试 技巧 与 解析 


面试 技巧 与 解析 (一) 


你 欣赏 哪 种 性 格 的 人 ? 
我 比较 欣赏 诚实 、 不 死板 而 且 容易 相处 、 有 “实际 行动 ”的 人 。 


面试 技巧 与 解析 (二 ) 


你 通常 如 何 处 理 别 人 的 批评 ? 
沉默 是 金 ， 不 必 说 什么 ， 否 则 情况 更 糟 ， 不 过 我 会 接受 建设 性 的 批评 ， 而 且 我 会 等 大 家 冷静 


在 本 篇 中 ， 将 详细 介绍 JavaScript 的 高 级 运用 。 通 过 本 篇 的 学 习 ， 读 者 将 学 会 文档 对 象 (Document) 
与 对 象 (DOM) 模型 ，JavaScript 的 事件 机 制 、 客 户 端 开发 技术 、 服 务 器 端 开发 技术 、 安 全 策略 以 及 错误 
和 异常 处 理 等 。 学 好 本 篇 可 以 极 大 地 提升 JavaScript 编程 能 力 。 


第 19 章 
第 20 章 
第 21 章 
第 22 章 
第 23 章 
第 24 章 


文档 对 象 与 对 象 模型 

JavaScript 事件 机 制 

JavaScript 客户 端 开发 技术 

JavaScript 服务 器 端 开发 技术 

JavaScript 的 安全 策略 及 安全 区 域 的 使 用 
JavaScript 中 的 错误 和 异常 处 理 


第 19 章 
文档 对 象 与 对 象 模型 


二 > 学 习 指引 


文档 对 象 (Document ) 代表 浏览 器 窗口 中 的 文档 ， 多 数 用 来 获取 HTML 页 面 中 某 个 元 素 。DOM 
( Document Object Model ) 模型 ， 即 文档 对 象 模型 ， 是 面向 HTML 和 XML 的 应 用 程序 接口 。 本 章 将 详细 介 
绍 文档 对 象 与 对 象 模型 的 应 用 , 主要 内 容 包 括 使 用 文档 对 象 、 DOM 模型 中 节点 、 操 作 DOM 模型 中 的 节点 等 。 


”重点 导读 


。 掌 握 文档 对 象 的 属性 与 方法 。 

。 掌 握 使 用 文档 对 象 的 方法 。 

。 掌 握 DOM 技术 的 简单 应 用 。 
"掌握 DOM 模型 中 节点 的 应 用 。 
*。 操 作 DOM 中 的 节点 。 

。 掌 握 DOM 与 CSS 的 结合 应 用 。 


19.1 熟悉 文档 对 象 


当 浏 览 器 载 入 HTML 文档 ， 它 就 会 成 为 Document 对 象 ，Document 对 象 使 用 户 可 以 从 脚本 中 对 HTML 
页 面 中 的 所 有 元 素 进行 访问 。Document 对 象 是 Window 对 象 的 一 部 分 ， 可 通过 window.document 属性 对 其 
进行 访问 。 


19.1.1 文档 对 象 属性 


window 对 象 具 有 Document 属性 ， 该 属性 表示 在 窗口 中 显示 HTML 文件 的 Document 对 象 。 客 户 端 
JavaScript 可 以 把 静态 HTML 文档 转换 成 交互 式 的 程序 ， 因为 Document 对 象 提供 交互 访问 静态 文档 内 容 的 
功能 。 除 了 提供 文档 整体 信息 的 属性 外 ，Document 对 象 还 有 很 多 的 重要 属性 ， 这 些 属 性 提供 文档 内 容 的 信 
息 。Document 对 象 常用 的 属性 及 描述 如 表 19-1 所 示 。 
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表 19-1 Document 对 象 常用 的 属性 及 描述 


属 性 


描 述 


document.alinkColor 


链接 文字 的 颜色 ， 对 应 于 <body> 标 签 中 的 alink 属性 


document.vlinkColor 


表示 已 访问 的 链接 文字 的 颜色 ， 对 应 于 <body> 标 签 中 的 vlink 属性 


document.linkColor 


document.bgColor 


未 被 访问 的 链接 文字 的 颜色 ， 对 应 于 <body> 标 签 中 的 link 属性 
文档 的 背景 色 ， 对 应 于 HTML 文档 中 <body> 标 记 的 bgcolor 属性 
档 的 文本 颜色 〈 不 包含 超 链接 的 文字 )， 对 应 于 HTML 文档 中 <body> 标 记 的 text 


document fgColor 属性 

document fileSize 当前 文件 的 大 小 
document fileModifiedDate 文档 最 后 修改 的 日 期 
document fileCreatedDate 文档 创建 的 日 期 
document.activeElement 返回 当前 获取 的 焦点 元 素 


document.adoptNode(node) 
document.anchors 
document.applets 
document.baseURI 
document.body 
document.cookie 
document.doctype 
document.documentElement 
document.documentMode 
document.documentURI 
document.domain 
document.domConfig 


document.embeds 


从 另外 一 个 文档 返回 adapded 节点 到 当前 文档 
返回 对 文档 中 所 有 Anchor 对 象 的 引用 
返回 对 文档 中 所 有 Applet 对 象 的 引用 

返回 文档 的 绝对 基础 URI 

返回 文档 的 body 元 素 

设置 或 返回 与 当前 文档 有 关 的 所 有 cookie 
返回 与 文档 相关 的 文档 类 型 声明 (DTD) 
返回 文档 的 根 节点 

返回 用 于 通过 浏览 器 泻 染 文档 的 模式 
设置 或 返回 文档 的 位 置 

返回 当前 文档 的 域名 

返回 normalizeDocument0 被 调用 时 所 使 用 的 配置 
返回 文档 中 所 有 嵌入 的 内 容 (embed) 集合 


document.forms 


返回 对 文档 中 所 有 Form 对 象 引用 


document.images 


返回 对 文档 中 所 有 Image 对 象 引用 


document.implementation 


返回 处 理 该 文档 的 DOMImplementation 对 象 


documentinputEncoding 


返回 用 于 文档 的 编码 方式 〈 在 解析 时 ) 


document.lastModified 
document.links 


document.readyState 


返回 文档 被 最 后 修改 的 日 期 和 时 间 
返回 对 文档 中 所 有 Area 和 Link 对 象 引用 
返回 文档 状态 〈 载 入 中 ……) 


documentreferrer 


返回 载 入 当前 文档 的 URL 


documentscripts 


返回 页 面 中 所 有 脚本 的 集合 
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Y 


续 表 


属 性 
document.strictErrorChecking 设置 或 返回 是 否 强制 进行 错误 检查 
document.title 返回 当前 文档 的 标题 
document.URL 返回 文档 完整 的 URL 
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Document 对 象 提供 了 一 系列 属性 ， 可 以 对 页 面 元 素 进行 各 种 属性 设置 。 下 面 介绍 常用 属性 的 应 用 。 


1. anchors 属性 


anchors 属性 用 于 返回 当前 页 面 的 所 有 超级 链接 数组 。 语 法 格式 如 下 : 


document .anchors[] .property 
【 例 19-1】〔 实 例文 件 ，ch19\Chap19.1.html) 返 


<!DocTYPE html> 

<html> 

<head> 
<title> 返 回 文档 的 链接 数 </title> 
</head> 

<body> 

<a name="html">HTML 教程 </a><br> 
<a name="css">CSS 教程 </a><br> 
<a name="xml">XML 教程 </a><br> 
<a name ="js">JavaScript 教程 </a> 
<p> 错 的 数量 : 


<script> 


可 


文档 的 链接 数 。 


document .write (document.anchors.length) 7 // 返 回 文档 的 链接 数 


</script> 
</p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.1.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-1 
所 示 。 


羡 cser 


oO x 


< -© Bet 


诡 伯 (有 ”志和 但 考 看 了 人 工具) 邦人) 


HTML 教 程 
CS5 教 可 


图 19-1 返回 文档 的 链接 数 


【 例 19-2】 (实例 文件 ，ch19\Chap19.2.html) 返 


加 


<!DOCTYPE html> 

<html> 

<head> 

<title> 返 回 文档 中 第 一 个 超级 链接 的 错 文本 </title> 
</head> 

<body> 


档 中 第 一 个 超级 链接 的 锚 文 本 。 
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相关 的 代码 实例 请 参考 Chap19.2.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-2 
所 示 。 


图 19-2 ”返回 文档 中 第 一 个 超 链接 的 锚 文 本 
2. lastModified 属性 
lastModified 属性 用 于 返回 文档 最 后 被 修改 的 日 期 和 时 间 。 语 法 格式 如 下 : 
document.lastModified 
【 例 19-3】 (实例 文件 :chl9\Chap19.3.html) 返回 文档 最 后 修改 的 日 期 和 时 间 。 


相关 的 代码 实例 请 参考 Chap19.3.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-3 
所 示 。 


图 19-3 返回 文档 最 后 修改 的 日 期 和 时 间 
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3. forms 属性 
forms 属性 返回 当前 页 面 所 有 表单 的 数组 集合 ， 语 法 格式 如 下 : 


【 例 19-4】〔 实 例文 件 ，ch19\Chap19.4.html》 返 回 文档 中 表单 数量 。 


相关 的 代码 实例 请 参考 Chap19.4.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-4 
所 示 。 


ce 口 x 
CB) Ecvewassreoe Dp - c| Sumona 


图 19-4 返回 文档 中 表单 数量 
【 例 19-5】 实例 文件 ，ch19\Chap19.5.html〉 返 回 文档 中 第 一 个 表单 的 名 称 。 


402 


第 因 章 文档 对 象 与 对 象 模型 


相关 的 代码 实例 请 参考 Chap19.5.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-5 


所 示 。 


19.1.2 文档 对 象 方法 


Document 对 象 有 很 多 方法 ， 
用 的 方法 及 描述 如 表 19-2 所 示 。 


方 法 
documentaddEventListener0 
document.close() 
document.open() 
document.createAttribute() 
document.createComment() 
document.createDocumentFragment() 
document.createElement() 
document.createTextNode() 
document.getElementsByClassName() 
document.getElementById() 
document.getElementsByName() 


document.getElementsByTagName() 


- 0O x 
司 chbeeraqarewpoc 只 - | 各 条 -人 eb 从 
Es) 


第 一 个 表单 的 名 称 为 : Fornl 


图 19-5 返回 文档 中 第 一 个 表单 的 名 称 


其 中 包括 以 前 程序 中 经 常 看 到 的 document.write0 方 法 ，Document 对 象 常 


表 19-2 Document 对 象 常 用 的 方法 及 描述 
描 述 
向 文档 添加 句柄 
关闭 用 document.open0 方 法 打开 的 输出 流 ， 并 显示 选 定 的 数据 
打开 一 个 流 ， 以 收集 来 自任 何 documentwrite0 或 document.writeln0 方 法 的 输出 
创建 一 个 属性 节点 
createComment0 方 法 可 创建 注释 节点 
创建 空 的 DocumentFragment 对 象 ， 并 返回 此 对 象 
创建 元 素 节点 
创建 文本 节点 
返回 文档 中 所 有 指定 类 名 的 元 素 集合 ， 作 为 NodeList 对 象 
返回 对 拥有 指定 id 的 第 一 个 对 象 的 引用 
返回 带 有 指定 名 称 的 对 象 集合 
返回 带 有 指定 标签 名 的 对 象 集合 


document.importNode0 


把 一 个 节点 从 另 一 个 文档 复制 到 该 文档 以 便 应 用 


document.normalize|O 


删除 空 文本 节点 ， 并 连接 相 邻 节点 


document.normalizeDocument() 


删除 空 文本 节点 ， 并 连接 相 邻 节点 的 文档 


document.querySelector0 


返回 文档 中 匹配 指定 的 CSS 选择 器 的 第 一 元 素 


document.querySelectorAlIO 


document.querySelectorAll0 是 HTML 5 中 引入 的 新 方法 ,返回 文档 中 匹配 的 CSS 
选择 器 的 所 有 元 素 节点 列表 


document removeEventListener() 


移 除 文档 中 的 事件 句柄 (由 addEventListener( 方 法 添加 ) 


documentrenameNode0 重 命名 元 素 或 者 属性 节点 
document writeO 向 文档 写 HTML 表达 式 或 JavaScript 代码 
document writeln0) 等 同 于 write0 方 法 ， 不 同 的 是 在 每 个 表达 式 之 后 写 一 个 换行 符 
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Document 对 象 提供 的 属性 和 方法 主要 用 于 设置 浏览 器 当前 载 入 文档 的 相关 信息 、 管 理 页 面 中 已 存在 的 


标记 元 素 对 象 、 往 目标 文档 中 添加 新 文本 内 容 、 产 生 并 操作 新 的 元 素 等 方面 。 下 面 介 绍 常用 方法 的 应 用 。 


1. createElement() 方 法 
使 用 createElement0 方 法 可 以 动态 添加 一 个 HTML 标记 ， 该 方法 可 以 根据 一 个 指定 的 类 型 来 创建 一 个 


HTML 标记 ， 语 法 格式 如 下 : 


document .createElement (nodename) 


【 例 19-6】〔 实 例文 件 ，ch19\Chap19.6.html) 动态 添加 一 个 文本 框 。 通 过 单 击 “ 动 态 添加 文本 ”按钮 ， 


在 页 面 中 添加 一 个 文本 框 。 


<!DOCTYPE html> 
<head> 
<title> 动 态 添加 一 个 文本 框 </title> 
<script> 
Cs 
function addText () 
a 
var txt=document.createElement ("input"); 
txt.type="text"; 
txt.name="txt"; 
txt .value=" 动 态 添加 的 文本 框 "; 
document.fml .appendchild (txt); 
--> 
</script> 
</head> 
<body> 
<form name="fml"> 
<input type="button”name="btnl”value=" 动 态 添加 文本 框 " onclick="addText ();" /> 
</form> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.6.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-6 所 示 。 
单 击 “动态 添加 文本 框 ”按钮 ， 即 可 在 页 面 中 添加 一 个 文本 框 ， 如 图 19-7 所 示 。 


- oOo x - 0O x 
闻 caUsers\qiangu\poc ”0 感 让 入 用- 人 文王 司 cvuserMqiangwpoc 用 -上 | 愿 90 下 广西 
文件 站” 舌 E】 坦 看 (收藏 和 A) 工具 (项 和 HH 文才 二 (E】 二 者 MV) 庚 二 天 工具 (1) 者 (tH) 
动态 添加 文本 杠 | 芭 杰 二 和文 去 权 | | 动态 系 加 的 文 直入 
图 19-6 运行 结果 图 19-7 动态 添加 一 个 文档 库 


通过 修改 createElement0 方 法 中 的 属性 值 ,还 可 以 创建 其 他 对 象 , 如 这 里 创建 一 个 带 有 文字 信息 的 按钮 。 
【 例 19-7】〈 实 例文 件 ，ch19\Chap19.7.html) 动态 添加 一 个 按钮 。 通 过 单 击 “ 动 态 添加 的 按钮 ”按钮 ， 


在 页 面 中 添加 一 个 按钮 。 
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相关 的 代码 实例 请 参考 Chap19.7html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-8 所 示 。 
单 击 “ 添 加 按钮 ”按钮 ， 即 可 在 页 面 中 添加 一 个 按钮 ， 如 图 19-9 所 示 。 


x 


bs oO 
Serenooo: ,© | os 


图 19-8 运行 结果 图 19-9 动态 添加 的 按钮 


2. getElementByld() 方 法 

使 用 getElementById0 方 法 可 以 获取 文本 框 并 修改 其 内 容 ， 该 方法 可 以 通过 指定 的 id 来 获取 HTML 标 
记 ， 并 将 其 返回 ， 语 法 格式 如 下 : 
docunent.getElementById(elenentID) 

下 面 给 出 一 个 实例 ， 在 页 面 加 载 后 的 文本 框 中 将 会 显示 “初始 文本 内 容 ”， 单 击 “ 更 改 文本 内 容 ” 按 钮 
后 将 会 改变 文本 框 中 的 内 容 。 

【 例 19-8】 实例 文件 ，ch19\Chap19.8.html) 修改 文本 框 的 内 容 。 
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相关 的 代码 实例 请 参考 Chap19.8 .html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-10 


所 示 。 


单 击 “修改 文本 ”按钮 ， 即 可 修改 页 面 中 的 文本 信息 ， 如 图 19-11 所 示 。 
= 画 流 二 厨 六 
加 CAUseaqianeu5ocP + 0 | Bene | 于 cserslqanguDoc -6 | 大 4 内 
文件 (月 ” 编 铝 (日 查看 (V) 收藏 去 (A) 工具 Mm 。 者 动 (H) 文件 日 。 编写 E) 查看 V) 。 收 车 二 (A。 工具 [帮助 (H) 
单 击 按钮 来 改变 这 一 段 中 的 文本 。 Hello JavaScript 
个 隐 文 本 个 下文 本 


图 19-10 ”运行 结果 图 19-11 修改 文本 框 的 内 容 


3. addEventListener() 方 法 
document.addEventListener0 方 法 用 于 向 文档 添加 事件 句柄 。 语 法 格式 如 下 : 
document .addEventListener (event, function, useCapture) 

下 面 给 出 一 个 实例 ， 在 页 面 加 载 后 通过 单 击 向 文档 添加 两 个 事件 。 

【 例 19-9】〔 实 例文 件 ，ch19\Chap19.9.html》 在 文档 中 添加 两 个 单 击 事件 。 


<!DocTYPE html> 
<html> 
<head> 
<title> 添 加 两 个 单 击 事件 </title> 
</head> 
<body> 
<p> 使 用 addEventListener () 方法 来 向 文档 添加 单 击 事件 。</p> 
<p> 单 击 文档 任意 处 。</p> 
<script> 
document .addEventListener ("click", myFunction); 
document .addEventListener ("click", someotherFunction); 
function myFunction() { 
alert ("Hello World!") 
} 
function someotherFunction() { 
alert ("Hello Javascript!") 
上 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.9.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-12 


所 示 。 
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| < Err 
文具 上 沈 尖 F) 雪 吾 M 启 营 夫 A) Tm 2 
合用 sddEventListenar 0 方法 玉 向 文档 添加 共事 件 . 
单 二 文档 任 间 处。 


图 19-12 在 文档 中 添加 两 个 单 击 事件 
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单 击 文档 的 任意 位 置 ， 弹 出 一 个 信息 提示 框 ， 即 可 完成 第 一 次 单 击 事件 的 操作 ， 如 图 19-13 所 示 。 
再 次 单 击 文档 的 任意 位 置 ， 弹 出 一 个 信息 提示 框 ， 即 可 完成 第 二 次 单 击 事件 的 操作 ， 如 图 19-14 所 示 。 


床 生 网 页 的 湛 皇 


幸 所 网 页 的 消息 


笃 Hello Wordt 息 Hallo JavaScript! 


19-13 “信息 提示 框 19-14 ”弹出 另 一 个 信息 提示 框 


注意 : ”Intermet Explorer 8 及 更 早 IE 版 本 不 支持 addEventListener( 方 法 ，Opera 7.0 及 Opera 更 早 版 本 
也 不 支持 。 但 是 ， 对 于 这 类 浏览 器 版 本 可 以 使 用 attachEvent( 方 法 来 添加 事件 句柄 。 


19.2 ”使 用 文档 对 象 


文档 对 象 的 属性 与 方法 有 很 多 ， 下 面 通过 几 个 实例 来 学 习 如 何 使 用 文档 对 象 。 


19.2.1 文档 标题 
使 用 title 属性 可 以 设置 文档 的 动态 标题 栏 ， 还 可 以 用 来 获取 和 设置 文档 的 标题 ， 语 法 格式 如 下 ; 


document .title 
【 例 19-10】 实例 文件 ，ch19\Chap19.10.html》 获 取 文 档 的 标题 。 


<!DOCTYPE html> 
<html> 

<head> 
<title> 个 人 主页 </title> 
</head> 

<body> 

文档 的 标题 为 : 

<script> 
document .write (document .title); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap19.10.html 文件 , 然后 双击 该 文件 , 在 下 浏览 器 中 运行 的 结果 如 图 19-15 
所 示 。 


< 口 x 

半 csers\qiangu\Doc DD - C | 医 个 页 
文件 (| 纺 强 日 查看 W) 收藏 夫 A) 工具 (T) 帮助 (H) 
文档 的 标题 为 : 个 人 主页 


图 19-15 ”获取 文档 的 标题 
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通过 修改 title 属性 的 变量 值 ， 可 以 制作 动态 标题 栏 ， 如 标题 栏 中 的 信息 不 断 闪烁 或 变换 。 
【 例 19-11】 实例 文件 ，ch19\Chap19.11.html》 制 作 动态 标题 栏 。 


<!DocTYPE HTML> 
<html> 
<head> 
<title> 动 态 标题 栏 </title> 
</head> 
<body> 
<img src="02.jpg" > 
<script language="Javascript"> 
Var n=0; 
function title(){ 
n++; 
if (n==3) {n=1} 
if (n==1) {document.title=' 人 女友 美 丽 风光 友 妆 '} 
if (n==2) {document.title=' 育 女 个 人 主页 女友 '} 


setTimeout ("title()",1000); /1 设置 1 秒 后 执行 title ( ) 
} 
title(); 
</script> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap19.11.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-16 
所 示 。 
稍 等 片刻 ， 可 以 看 到 标题 栏 中 的 文字 不 断 地 变化 ， 从 “个 人 主页 ”变换 到 “美丽 风光 ” 如 图 19-17 
所 示 。 
口 x 5 0 x 
站 Cicers\qiangu\Doc 站 ”CC | 局 个 人 主 天 x 全 CAUcors\qiongu\Doc 只 - | 兢 kx 英 丽 OA 广 
文件 们 。 病 三 (E) 查看 (V) 。 收 荐 交 (A) 工具 (D) 者 和 (H) 又 笠 们 加 者 豆 看 (V) 路 号 天 | 人 A) 工具 () 其 且 (HH 


图 19-16 运行 结果 图 19-17 动态 变换 网 页 标题 栏 信息 


19.2.2 文档 信息 


一 个 文档 的 信息 包括 很 多 种 ， 如 当前 文档 的 域名 、 文 档 对 象 的 当前 状态 、 当 前 文档 有 关 的 所 有 cookie 
信息 等 ， 具 体 的 语法 如 下 : 
document .domain 


document .readystate 
document .cookie 
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【 例 19-12】〔 实 例文 件 ，ch19\Chap19.12.html》 获 取 文 档 信息 。 


相关 的 代码 实例 请 参考 Chap19.12.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-18 
所 示 。 


国人 EEC 
| 诡 付 () 六 E) 查看 必 吉 (A) 工 RD 邦和 (H) 


War 
当前 文档 3 loading 


图 19-18 获取 文档 信息 


19.2.3 ”文档 地 址 


使 用 URL 属性 可 以 获取 并 设置 当前 文档 的 URL 地 址 。 语 法 格式 如 下 ; 
生生 生生 SD 

下 面 给 出 一 个 实例 ， 在 页 面 中 显示 了 当前 文档 的 URL。 

【 例 19-13】 实例 文件 ，ch19\Chap19.13.html》 获 取 当 前 文档 的 URL 地 址 。 


相关 的 代码 实例 请 参考 Chap19.13.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-19 
所 示 。 
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OVE | Sra x 
Ta an BEM ws TEM Wt 
当前 页 而 的 mL: rite-//c 


\Users\niangu\Docunents\ 估 码 \Chapl2 13. hral 


19-19 ”获取 当前 文档 的 URL 地 址 


19.2.4 ”颜色 属性 


Document 对 象 提 供 了 alinkColor、bgColor、 人 经 Color 等 几 个 颜色 属性 ， 来 设置 Web 页 面 的 显示 颜色 ， 


一 般 定义 在 <body> 标 记 中 ， 在 文档 布局 确定 之 前 完成 设置 。 
1. alinkColor 属性 


使 用 Document 的 alinkColor 属性 ， 可 以 自己 定义 活动 链接 的 颜色 ， 而 活动 链接 是 指 用 户 正在 使 用 的 超 
级 链接 ， 即 用 户 将 鼠标 指针 移动 到 某 个 链接 上 并 按 下 鼠标 按键 ， 此 链接 就 是 活动 链接 。 其 语法 格式 为 : 


document .alinkColor= "colorValue"; 


其 中 ，colorValue 是 用 户 指定 的 颜色 ， 其 值 可 以 是 red、blue、green、black、gray 等 颜色 名 称 ， 也 可 以 是 


十 六 进 制 RGB， 如 白色 对 应 十 六 进 制 RGB 值 是 #FFFF。 


颜色 时 ， 需 要 在 页 面 的 <scrip 人 标记 中 添加 指定 活动 链接 颜色 的 语句 。 
例如 ， 需 要 指定 用 户 单 击 链接 时 ， 链 接 的 颜色 为 红色 ， 其 语法 格式 如 下 : 
<Script language="JavaSscript" type="text/javascript"> 
document .alinkColor="red"; 
</script> 


也 可 以 在 <body> 标 记 的 onload 事件 中 添加 ， 其 语法 格式 如 下 : 


<body onload="document .alinkColor='red';"> 


在 正 浏 览 器 中 ， 活 动 链接 的 默认 颜色 为 蓝 色 ， 用 颜色 表示 就 是 blue 或 #0000FF。 用 户 设 定 活动 链接 的 


提示 : 使 用 基于 RGB 的 16 位 色 时 ， 需 要 注意 在 值 前 面 加 上 “#” 号， 同时 颜色 值 不 区 分 大 小 写 ，red 


与 Red、RED 的 效果 相同 ，#ff0000 与 证 F0000 的 效果 相同 。 
2. bgColor 属性 


bgColor 表示 文档 的 背景 颜色 ， 通 过 Document 对 象 的 bgColor 属性 获取 或 更 改 。 语 法 格式 如 下 : 


var colorstr=document .bgColor; 


其 中 ，colorStr 是 当前 文档 的 背景 色 的 值 。 使 用 Document 对 象 的 bgColor 属性 时 ， 需 要 注意 


于 JavaScript 


区 分 大 小 写 ,， 因此 必须 严格 按照 背景 色 的 属性 名 bgColor 来 对 文档 的 背景 色 进 行 操作 。 使 用 bgColor 属性 获 


取 的 文档 的 背景 色 是 以 “# ”号 开头 的 基于 RGB 的 十 六 进 制 颜色 字符 串 。 在 设置 背景 色 时 ， 可 以 使 用 颜色 


字符 串 red、green 和 blue 等。 


3. fgColor 属性 
使 用 Document 对 象 的 芭 Color 属性 可 以 修改 文档 中 的 文字 颜色 , 即 设置 文档 的 前 景色 。 语 
var fgcolorobj=document .fgcolor7 


其 中 ，f8ColorObj 表示 当前 文档 的 前 景色 的 。 获 取 与 设置 文档 前 景色 的 方法 与 操作 文档 背景 色 


410 


法 格式 如 下 : 


的 方法 相似 。 
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4. linkColor 属性 

使 用 Document 对 象 的 linkColor 属性 可 以 设置 文档 中 未 访问 链接 的 颜色 。 其 属性 值 与 alinkColor 类 似 ， 
可 以 使 用 十 六 进 制 RGB 颜色 字符 串 表 示 。 语 法 格式 如 下 : 

var colorVal=document .linkColor; // 获 取 当 前 文档 中 链接 的 颜色 

document .1inkColor="colorValue"; // 设 置 当前 文档 链接 的 颜色 
其 中 ， 获 取 链 接 颜色 的 colorVal 是 获取 的 当前 文档 的 链接 颜色 字符 串 ， 其 值 与 获取 文档 背景 色 的 值 相似 ， 
都 是 十 六 进 制 RGB 颜色 字符 串 。 而 colorValue 是 需要 给 链接 设置 的 颜色 值 。 由 于 JavaScript 区 分 大 小 写 ， 
此 使 用 此 属性 时 仍然 要 注意 大 小 写 ， 否 则 在 JavaScript 中 ， 无 法 通过 linkColor 属性 获取 或 修改 文档 未 访 
问 链接 的 颜色 。 

用 户 设 定 文档 链接 的 颜色 时 ， 需 要 在 页 面 的 <script> 标 记 中 添加 指定 文档 未 访问 链接 颜色 的 语句 。 如 需 
要 指定 文档 未 访问 链接 的 颜色 为 红色 ， 其 语法 格式 如 下 : 


< Script language ="JavaSscript" type="text/javascript"> 
二 


document .linkColor="red"7 
> 
</Script> 


与 设 定 活动 链接 的 颜色 相同 ， 设 置 文档 链接 的 颜色 也 可 以 在 <body> 标 记 的 onload 事件 中 添加 ， 其 语法 
格式 如 下 : 


<body onload="document .linkColor='red';"> 


5. vlinkColor 属性 

使 用 Document 对 象 的 vlinkColor 属性 可 以 设置 文档 中 用 户 已 访问 链接 的 颜色 。 语 法 格式 如 下 : 

var colorstr=document .vlinkColor; ”// 获 取 用 户 已 观察 过 的 文档 链接 的 颜色 

document .vlinkColor="colorstr"; // 设 置 用 户 已 观察 过 的 文档 链接 的 颜色 

Document 对 象 的 vlinkColor 属性 的 使 用 方法 与 使 用 alinkColor 属性 相似 。 在 正 浏览 器 中 ， 默 认 的 用 户 
已 观察 过 的 文档 链接 的 颜色 为 紫色 。 用 户 在 设置 已 访问 链接 的 颜色 时 ， 需 要 在 页 面 的 <scripf> 标 记 中 添加 指 
定 已 访问 链接 颜色 的 语句 。 例 如 ， 需 要 指定 用 户 已 观察 过 的 链接 的 颜色 为 绿色 ， 其 方法 如 下 : 

< Script language ="dJavaScript"” type="text/javascript"> 

和 

这 

</Script> 

也 可 以 在 <body> 标 记 的 onload 时 间 中 添加 ， 其 语法 格式 如 下 : 

<body onload="document .vlinkColor='green';"> 

下 面 的 HTML 文档 中 包含 有 上 面 各 个 颜色 属性 ， 其 作用 是 动态 改变 页 面 的 背景 颜色 和 查看 已 访问 链接 

的 颜色 。 

【 例 19-14】 实例 文件 ，ch19\Chap19.14.html》 颜 色 属性 的 设置 。 

<!DOCTYPE HTML> 

<html> 


<head> 
<title> 颜 色 属 性 </title> 


<script language="Javascript" type="text/javascript"> 


/1 设置 文档 的 颜色 显示 
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function setcolor() 
document .bgColor="yellow"; 
document .fgColor="green"; 
document .linkColor="red"; 
document .alinkColor="blue"; 
document .vlinkColor="purple"; 


} 
// 改 变 文档 的 背景 色 为 海蓝 色 
function changecolorover () 
{ 
document .bgCcolor="navy"; 
return; 


} 

/ /改变 文档 的 背景 色 为 黄色 

function Changecolorout () 

i 
document .bgColor="yellow"; 
return; 

j 

Me 

</script> 

</head> 

<body onload="setcolor () "> 

<center> 

<br> 

<p> 设 置 颜色 </p> 

<a href=" 个 人 主页 .html"> 链 接 颜色 </a> 


<form name="MyForm3"> 


<input type="submit" name="MySure"” value=" 动 态 背 景色 " 
onmouseover="ChangeColorOver ()" onmouseOut="ChangeColorOut () "> 


</form> 
<center> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.14.html 文件 , 然后 双击 该 文件 , 在 IE 浏览 器 中 运行 的 结果 如 图 19-20 
所 示 。 
移动 鼠标 指针 到 “动态 背景 色 ” 按 钮 上 时 即 可 触发 onmouseOver0 事 件 ， 调 用 ChangeColorOver0 函 数 
来 动态 改变 文档 的 背景 颜色 为 海蓝 色 ， 当 鼠标 指针 移 离 “ 动 态 背 景色 ”按钮 时 ， 即 可 触发 onmouseOut0 事 
件 ， 调 用 ChangeColorOut0 函 数 将 页 面 背景 颜色 恢复 为 黄色 ， 如 图 19-21 所 示 。 


| oO Xx 


| 国 Gwsersigaroupo PD- 0 | 避 m 和 a 人 


文件 中。 闹 息 (二 看 V) 尿 写 夫人) 工具 站 大 动 H) 


国 Guseregangdpe 


WA 全 员 世 司 性 


0 


Es Gu 


图 19-20 ”运行 结果 


图 19-21 动态 变换 背景 色 


单 击 “ 链 接 颜色 ”链接 可 以 查看 设置 的 已 访问 链接 的 颜色 ， 这 里 设置 的 是 “ 蓝 色 ”， 如 


医 


19-22 所 示 。 
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图 19-22 设置 访问 过 的 链接 颜色 


19.2.5 ”输出 数据 


使 用 文档 对 象 可 以 输出 数据 ， 根 据 输出 方式 的 不 同 ， 输 出 数据 分 为 两 种 情况 ， 一 种 是 在 文档 中 输出 数 
据 ， 另 一 种 是 在 新 窗口 中 输出 数据 。 


1. 在 文档 中 输出 数据 

使 用 document.write0 方 法 和 document.writeln0 方 法 可 以 在 文档 中 输出 数据 ， 其 中 document write() 方 法 
用 来 向 HTML 文档 中 输出 数据 ， 其 数据 包括 字符 串 、 数 字 和 HIML 标记 等 ， 语 法 格式 如 下 : 

document .write (expl, exp2, exp3, ...) 

document.writeln() 方 法 与 document.write0 方 法 的 作用 相同 , 唯一 不 同 的 在 于 writeln0 方 法 在 所 输出 的 内 
容 后 , 添加 了 一 个 回 车 换行 符 , 但 回 车 换行 符 只 有 在 HTML 文档 中 <pre></pre> 标 记 内 才能 被 识别 。 语 法 格 
式 如 下 : 

document .writeln (exp1, exp2, exp3, ...) 

下 面 介绍 一 个 实例 , 该 实例 使 用 document.writeln0 方 法 与 document.write0 方 法 在 页 面 中 输出 几 段 文字 ， 
从 而 区 别 两 种 方法 的 不 同 。 

【 例 19-15】 实 例文 件 ，ch19\Chap19.15.html》 在 文档 中 输出 数据 。 

<!DOCTYPE html> 

<html> 

<head> 

<title> 在 文档 中 输出 数据 </title> 

</head> 

<body> 

<p> 注 意 write() 方 法 不 会 在 每 个 语句 后 面 新 增 一 行 : </p> 


<pre> 


<script> 

document .write ("<hl>Hello World! </h1>"); 
document -write ("<hl>Have a nice day! </hl>")7 
</script> 

</pre> 

<p> 注 意 writeln() 方 法 在 每 个 语句 后 面 新 增 一 行 : </p> 
<pre> 

<script> 

document .writeln ("<hl>Hello World! </h1>"); 
document .writeln ("<hl>Have a nice day! </h1>"); 
</script> 

</pre> 
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</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.15.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-23 


所 示 。 


SMR eH Eo esN IRM we 


isef 广 法 不 全 全 而 新 江 一 全， 
Hello World! 


Have a nice day! 


广 可 mrirela0 方 法 在 导 个 刘 铝 后 面条 二 一 他 
Hello World! 


Have a nice day! 


19-23 ”在 文档 中 输出 数据 


2. 在 新 窗口 中 输出 数据 
使 用 document.open0 与 document.close0 方 法 可 以 在 打开 的 新 窗口 中 输出 数据 ， 其 中 document.open0 方 法 


用 来 打开 文档 输出 流 ， 并 接受 writeln( 方 法 与 write0 方 法 的 输出 ， 此 方法 可 以 不 指定 参数 ， 语 法 格式 如 下 : 


document .open (MIMEtype, replace) 
document'close() 方 法 用 于 关闭 文档 的 输出 流 ， 语 法 格式 如 下 : 

document .close() 

下 面 给 出 一 个 实例 ， 通 过 单 击 页 面 中 的 按钮 ， 打 开 一 个 新 窗口 ， 并 在 新 窗口 中 输出 新 的 内 容 。 
【 例 19-16】 实例 文件 ，ch19\Chap19.16.html》 在 新 窗口 中 输出 数据 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 在 新 窗口 中 输出 数据 </title> 
<script> 
function createDoc(){ 
var w=window.open(); 
Ww.document .open (); 
Ww.document .write("<hl>Hello Javascript!</h1>"); 
Ww.document .close (); 
j， 
</script> 
</head> 
<body> 
<input type="button"” value=" 新 窗口 的 新 文档 " onclick="createDoc()"> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.16.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-24 


所 示 。 
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单 击 “新 窗口 的 新 文档 ”按钮 ， 即 可 在 新 的 窗口 中 输出 新 数据 内 容 ， 如 图 19-25 所 示 。 
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ox Ss 
© der 0 Severn Er 
文件 月 ” 涯 霹 E) 可 志 (V| 。 收 茂 夫 (A) 工具 (于 色 IH) 文 尾 丫头 生 (中 三才 (W) 效 莹 (A] 工 县 (T) 需 印 (H) 
| Hello JavaScript! 
图 19-24 在 新 窗口 中 输出 数据 图 19-25 在 新 窗口 中 输出 新 数据 


19.3 DOM 及 DOM 技术 简介 


文档 对 象 模型 (DOM) 是 表示 文档 (例如 HTML 和 XML) 和 访问 、 操 作 构 成 文档 的 各 种 元 素 的 应 用 
程序 接口 (API)， 支 持 JavaScript 的 所 有 浏览 器 都 支持 DOM。 


19.3.1 DOM 简介 


t 

DOM 将 整个 HTML 页 面 文档 规划 成 由 多 个 相互 连接 的 节点 级 构成 的 文档 ， 文 档 中 的 每 个 部 分 都 可 以 
看 作 是 一 个 节点 的 集合 ， 这 个 节点 集合 可 以 看 作 是 一 个 节点 树 (Tree)， 通 过 这 个 文档 树 ， 开 发 者 可 以 通过 
DOM 对 文档 的 内 容 和 结构 进行 十 分 全 面 的 遍历 、 添 加 、 删 除 、 修 改 和 替换 节点 操作 。 如 图 19-26 所 示 为 
DOM 模型 被 构造 为 对 象 的 树 。 


DoM 树 


Document 


Root element 
<html> 
Element: Element: 
<body> 
Element: Reibute, Element Elemere 
<title> “href” <3> <hl> 
Text TEA Text: 
“My title” My ink" “My header” 


图 19-26 ”DOM 模型 数 结构 
通过 可 编程 的 对 象 模型 ，JavaScript 获得 了 足够 的 能 力 来 创建 动态 的 HIML， 可 以 改变 页 面 中 的 所 有 
HIML 元 素 、CSS 样式 、HTML 属性 以 及 可 以 对 页 面 中 的 所 有 事件 做 出 反应 。 可 以 说 ，DOM 是 一 种 与 浏 
览 器 、 平 台 、 语 言 无 关 的 接口 。 
另外 ， 通 过 DOM 可 以 很 好 地 解决 Netscape 的 JavaScript 和 Microsoft 的 Jscript 之 间 的 冲突 ， 给 予 Web 
设计 师 和 开发 者 一 个 标准 的 方法 ， 可 以 方便 地 访问 站 点 中 的 数据 、 脚 本 和 表现 层 对 象 。 


19.3.2 DOM 技术 的 简单 应 用 


下 面 给 出 一 个 简单 的 实例 ， 该 实例 主要 是 利用 JavaScript 中 的 document.body.bgColor 来 修改 body 的 背 
景 颜 色 。 
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【 例 19-17】 〈 实 例文 件 ，ch19\Chap19.17.html) 修改 背景 颜色 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 修 改 背 景 颜色 </title> 
<script type="text/javascript"> 
function ChangeBackgroundcolor() 
{ 
document .body.bgColor="green"; // 修 改 背景 色 
} 
</script> 
</head> 
<body onclick="ChangeBackgroundcolor () "> 
单 击 改变 背景 颜色 ! 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.17.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-27 


所 示 。 


19. 


在 页 面 中 单 击 ， 即 可 改变 页 面 的 背景 颜色 ， 如 图 19-28 所 示 。 
一 口 X 口 X 
@ 中 ETREPPRRTRET 下 - 闻 csersaianguDoc 万 、 忆 | 辣 WE 
交 件 中 。 售 媚 (E]。 覃 看 (V) 站 区 实 (Aj 工 明 (T) 鞭 助 (H) 文 /HP ” 沂 兢 (E) ”到 看 V) 要 二 实 从) 工具 (得 动 (中 
单 击 改变 肖 最 新 色 ! 
图 19-27 修改 背景 颜色 图 19-28 ”修改 背景 颜色 为 绿色 


3.3 ”基本 的 DOM 方法 
DOM 方法 很 多 ， 这 里 只 介绍 一 些 基本 的 方法 ， 包 括 直接 引用 节点 、 间 接 引用 节点 、 获 取 节点 信息 、 处 


理 节点 信息 、 处 理 文本 节点 及 改变 文档 层次 结构 等 。 


1. 直接 引用 节点 

有 两 种 方式 可 以 直接 引用 节点 : 

(1) document.getElementById(id) 方 法 :在 文档 里 通过 id 来 找 节 点 ， 返 回 时 找到 的 节点 对 象 只 有 一 个 。 
(2) document.getElementsByTagName(tagName) 方 法 : 通过 HTML 的 标记 名 称 在 文档 里 面 查找 ， 返 回 


的 满足 条 件 的 数组 对 象 。 


416 


【 例 19-18】 〈 实 例文 件 ，chl9\Chap19.18.html) 获取 节点 信息 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 获 取 节 点 信息 </title> 
<script> 
function start() { 
/1/1. 获得 所 有 的 body 元 素 列表 ( 此 处 只 有 一 个 ) 


myDocumentElements=document .getElementsByTagName ("body"); 


//2. body 元 素 是 这 个 列表 的 第 一 个 元 素 
myBody=myDocumentElements.item(0); 


//3- 获得 body 的 子 元 素 中 所 有 的 P 元 素 


myBodymyBodyElements=myBody-getElementsBYTagName ("p") 7 


114。 获得 这 个 列表 中 的 第 二 个 单元 元 素 
myP=myBodyElements.item(1); 

3 
</script> 
</head> 
<body onload="start ()"> 
<p> 你 好 ! </p> 
<p> 欢 迎 光 临 ! </p> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.18.html 文件 , 然后 双击 该 文件 ， 
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19-29 获取 节点 信息 


在 下 浏览 器 中 运行 的 结果 如 图 19-29 所 示 。 @ 

在 上 述 代码 中 , 设置 变量 myP 指向 DOM 对 象 body 中 的 第 二 个 a 
了 元素。 首先 ， 使 用 下 面 的 代码 获得 所 有 的 body 元 素 的 列表 , 因为 。 | 人， 
在 任何 合法 的 HTML 文档 中 都 只 有 一 个 body 元 素 ， 所 以 这 个 列表 
是 只 包含 一 个 单元 的 。 

document .getElementsByTagName ("body"); 

下 一 步 ， 取 得 列表 的 第 一 个 元 素 ， 它 本 身 就 是 body 元 素 对 象 。 

myBody=myDocumentElements.item(0); 

然后 ， 通 过 下 面 代码 获得 body 的 子 元 素 中 所 有 的 p 元素 。 

myBodyElements=myBody .getElementsByTagName ("p"); 

最 后 ， 从 列表 中 取 第 二 个 单元 元 素 。 

myP=myBodyElements.item(1); 

2. 间接 引用 节点 

间接 引用 节点 ， 主 要 包括 对 节点 的 子 节点 、 父 节点 以 及 兄弟 节点 的 访问 。 

(1) element.parentNode 属性 ， 引 用 父 节点 。 


(2) element.childNodes 属性 : 返回 所 有 的 子 节点 的 数组 。 


(3) element.nextSibling 属性 和 element.nextPreviousSibling 属性 分 别 是 对 下 一 个 兄弟 节点 和 上 一 个 兄弟 


节点 的 引用 。 
3. 获取 节点 信息 


获取 节点 信息 主要 包括 获取 节点 名 称 、 节 点 类 型 、 节 点 值 。 


(1) nodeName 属性 ， 获得 节点 名 称 。 
(2) nodeType 属性 ， 获得 节点 类 型 。 

(3) nodeValue 属性 ， 获 得 节点 的 值 。 

(4) hasChildNodes0: 判断 是 否 有 子 节点 。 
(5) tagName 属性 ， 获 得 标记 名 称 。 


4. 处 理 节点 信息 


除了 通过 “元 素 节点 .属性 名 称 ”的 方式 访问 外 ,还 可 以 通过 setAttribute0 和 getAttribute0 方 法 设置 和 获 


417 


2 
NN 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实 中 ( 超 信 版 ) 


取 节 点 属性 。 
(1) elementNode.setAttribute(attributeName.attributeValue): 设置 元 素 节点 的 属性 。 
(2) elementNode.getAttribute(attributeName): 获取 属性 值 。 


5. 处 理 文本 节点 

主要 有 innerHTML 和 innerText 两 个 属性 。 

(1) innerHTML 属性 : 设置 或 返回 节点 开始 和 结束 标签 之 间 的 HTML。 

《2) innerText 属性 : 设置 或 返回 节点 开始 和 结束 标签 之 间 的 文本 ， 不 包括 HTML 标签 。 


6. 改变 文档 层次 结构 

(1) document.createElement( 方 法 : 创建 元 素 节 点 。 

(2) document.createTextNode() 方 法 : 创建 文本 节点 。 

(3) appendChild(childElement) 方 法 ， 添加 子 节点 。 

(4) insertBefore(newNoderefNode): 插入 子 节点 ，newNode 为 插入 的 节点 ，refNode 为 将 插入 的 节点 插 
入 这 之 前 。 

(5) replaceChild(newNode,oldNode) 方 法 :取代 子 节点 ，oldNode 必须 是 parentNode 的 子 节点 。 

(6) cloneNode(includeChildren) 方法 : 复制 节点 ，includeChildren 为 bool， 表 示 是 否 复制 其 子 节点 。 

(7) removeChild(childNode) 方 法 ， 删 除 子 节点 。 

下 面 给 出 一 个 实例 ， 用 于 演示 创建 节点 、 创 建文 本 节点 并 添加 到 其 他 节点 的 过 程 。 

【 例 19-19】《〈 实 例文 件 ，ch19\Chap19.19.html) 创建 节点 、 创 建文 本 节点 并 添加 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 创 建 节 点 实例 </title> 


<script type="text/javascript"> 


function createMessage() { 
var oF = document.createElement ("p"); 
var oText = document.createTextNode ("HelloJavascript!"); 
oP.appendchild (oText); 
document .body.appendchild (op); 
} 
</script> 
</head> 
<body onload="createMessage () "> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.19.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-30 
所 示 。 


@ 装 GUeeraqareuboe D ~ 6 | 大 E55 全 
立 件 (月 ”篇 沪 {E) ”查看 (/) 履 宫 去 (A) 工 琶 mT) 大 动 (H) 


HelloJavaScript! 


图 19-30 创建 节点 
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运行 上 述 代码 并 页 面 载 和 后， 创建 节点 op， 并 创建 一 个 文本 节点 oText，oText 通过 appendChild 方法 
附加 在 oP 节点 上 ， 为 了 实际 显示 出 来 ， 将 oP 节点 通过 appendChild 方法 附加 在 body 节点 上 ， 此 例子 将 显 


示 Hello JavaScript!。 


19.3.4 网 页 中 的 DOM 框架 


为 了 便于 理解 网 页 中 的 DOM 模型 框架 ， 下 面 以 一 个 简单 的 HTML 页 面 为 例 展开 介绍 。 
【 例 19-20】 实例 文件 ，ch19\Chap19.20.html〉 创 建 网 页 中 的 DOM 模型 框架 。 


<!DOCTYPE html> 

<html> 

<head> 
<title>DOM 模型 实例 </title> 
</head> 

<body> 

<h1> 我 的 标题 </h1> 

<a href="#"> 我 的 链接 </a> 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap19.20.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-31 
所 示 。 


o x 
加 csersqaraupoc ~ 6]| 司 oovaasgl 
_H) Wk) EE/ Sm 工具 WH) 


我 的 标题 


我 的 位 控 


图 19-31 创建 网 页 中 的 DOM 模型 框架 
上 述 实例 对 应 的 DOM 节点 层次 模型 如 图 19-32 所 示 。 


[<ue: 未 ] < 元 素 |] 


Bowl 示例: 文本 】 [her: 局 性 [ait 文本】 [我 的 标 是 文本] 
图 19-32 DOM 节点 层次 模型 


在 这 个 树 状 图 中 ， 每 一 个 对 象 都 可 以 称 为 一 个 节点 ， 下 面 介 绍 几 种 节点 的 概念 。 
(1) 根 节点 : 在 最 顶层 的 <html> 节 点 ， 称 为 根 节点 。 
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《2) 父 节点 : 一 个 节点 之 上 的 节点 是 该 节点 的 父 节点 , 如 <html> 就 是 <head> 和 <body> 的 父 节点 , <head> 
是 <title> 的 父 节点 。 


(3) 子 节点 ; 位 于 一 个 节点 之 下 的 节点 就 是 该 节点 的 子 节点 ， 如 <head> 和 <body> 就 是 <html> 的 子 节点 ， 


<title> 是 <head> 的 子 节点 。 


(4) 兄弟 节点 : 如 果 多 个 节点 在 同一 个 层次 ,并 拥有 相同 的 父 节点 ， 这 个 节点 就 是 兄弟 节点 ， 如 <head> 


和 <body> 就 是 兄弟 节点 。 


代 。 


(5) 后 代 节点 ， 一 个 节点 的 子 节点 的 结合 可 以 称 为 该 节点 的 后 代 ， 如 <head> 和 <body> 就 是 <html> 的 后 


(6) 叶子 节点 ; 在 树 形 结构 最 低层 的 节点 称 为 叶子 节点 ， 如 “我 的 标题 ”“ 我 的 链接 ” 以 及 自己 的 属 


性 都 属于 叶子 节点 。 


19. 


19.4 ”DOM 模型 中 的 节点 
在 DOM 模型 中 有 三 种 节点 ， 它 们 分 别 是 元 素 节点 、 文 本 节点 和 属性 节点 ， 下 面 分 别 进行 介绍 。 


4.1 元 素 节点 


可 以 说 整个 DOM 模型 都 是 由 元 素 节点 构成 的 元素 节点 可 以 包含 其 他 的 元 素 ,例如 <li> 可 以 包含 在 <ul> 
唯一 没有 被 包含 的 就 只 有 根 元 素 HTML。 
【 例 19-21】 实例 文件 ，ch19\Chap19.21.html)》 元 素 节 点 实例 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 元 素 节 点 实例 </title> 
<script type="text/javascript"> 
function getNodeProperty() 
{ 
var d = document .getElementById ("Will"); 
alert (d.nodeType); 
alert (d.nodeName); 
alert (d.nodeValue); 
</script> 
</head> 
<body> 
<table border=1> 
<tr> 
<td id="Will" name="myname">Will</td> 
<td id="smith">smith</td> 
</tr> 
</table> 
<br /> 
<input type="button"” onclick="getNodeProperty()"” value=" 点 击 获取 元 素 节 点 属性 值 ” /> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.21.html 文件 , 然后 双击 该 文件 , 在 IE 浏览 器 中 运行 的 结果 如 图 19-33 


所 示 。 
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单 击 “ 点 击 获取 元 素 节 点 属性 值 ”按钮 ， 即 可 弹出 一 个 信息 提示 框 ， 显 示 运 行 的 结果 如 图 19-34 所 示 。 
再 连续 两 次 单 击 “ 确 定 ” 按 钮 ， 将 弹出 另外 两 个 信息 提示 框 ， 显 示 运 行 的 结果 如 图 19-35 所 示 。 


= 利 “ 芝 
@ 站 ChUsers\qiangu\poc 呈 ~ 0 | 层 元 素 5 吉 去 全 
文件 上 ”第 辑 (E) ”可 硅 (V) 要 凉 夫 (Al 工具 (T) 著名 (H) 


[alllsnirh| 


点 击 著 了 元 素 节 点 属性 直 


图 19-33 元 素 节点 实例 19-34 ”信息 提示 框 19-35 ”运行 结果 
提示 : 运行 结果 对 应 的 结果 为 : 
nodeType: 1， 是 ELEMENT_ NODE; 
nodeName: TD， 元 素 标记 名 ， 
nodeValue: null。 


19.4.2 文本 节点 
在 HTML 中， 文本 节点 是 向 用 户 展示 内 容 ， 例 如 下 面 一 段 代码 ; 


<a href="http://www.haol23.com" title=" 我 的 主页 "> 我 的 主页 </a> 


其 中 ,“ 我 的 主页 ”就 是 一 个 文本 节点 。 
【 例 19-22】 实例 文件 ，ch19\Chap19.22.html) 文本 节点 实例 。 


<!DocTYPE html> 

<html> 

<head> 
<title> 文 本 节点 实例 </title> 
<script type="text/javascript"> 
function getNodeProperty() 

i 


var d = document .getElementsByTagName ("td") [0] .firstchild; 
alert (d.nodeType); 
alert (d.nodeName); 
alert (d.nodeValue); 
} 
</script> 
</head> 
<body> 
<table border=1> 
<tr> 
<td id="Will" name="myname">Will</td> 
<td id="smith">smith</td> 
</tr> 
</table> 
<br /> 
<input type="button"” onclick="getNodeProperty()"” value=" 点 击 获取 文本 节点 属性 值 ” /> 
</body> 
</html> 
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相关 的 代码 实例 请 参考 Chap19.22 .html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-36 
所 示 。 

单 击 “ 点 击 获取 文本 节点 属性 值 ”按钮 ， 即 可 弹出 一 个 信息 提示 框 ， 显 示 运 行 的 结果 如 图 19-37 所 示 。 

再 连续 两 次 单 击 “ 确 定 ”按钮 ， 将 弹出 另外 两 个 信息 提示 框 ， 显 示 运 行 的 结果 如 图 19-38 所 示 。 


一 寺 x 
辣 cWeoraqioneuDoc 万 - 6| 夺 ET 
文件 (F|。 编 宇 (E) 。 坦 看 (V) 收 瑟 天 (A) 工具 (T) 规 盈 (HI 


[EEE 全 3 


二 在 员 到 文本 节 后 属性 人 
图 19-36 文本 节点 实例 图 19-37 ”信息 提示 框 图 19-38 运行 结果 


提示 : 运行 结果 ， 其 三 个 属性 的 值 分 别 为 : 
nodeType: 3, TEXT_ NODE; 

nodeName: #text; 

nodeValue: Wil， 文 本 内 容 。 


亲自 网 页 的 消息 。 X 


页 面 中 的 元 素 ， 或 多 或 少 都 会 有 一 些 属性 ， 例 如 ， 几 乎 所 有 的 元 素 都 有 title 属性 。 可 以 利用 这 些 属性 ， 
对 包含 在 元 素 里 的 对 象 做 出 更 准确 的 描述 。 例 如 下 面 一 段 代 码 ; 


<a href="http://www.haol23.com" title=" 我 的 主页 "> 我 的 主页 </a> 


其 中 ，href="http://www.hao123.com" 和 title=" 我 的 主页 "就 分 别 是 两 个 属性 节点 。 
【 例 19-23】 〈 实 例文 件 ， chl9\Chap19.23.html) 属性 节点 实例 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 属 性 节点 实例 </title> 
<script type="text/javascript"> 
function getNodeProperty() 
. 
var d = document .getElementById ("Will") .getAttributeNode ("name"); 
alert (d.nodeType); 
alert (d.nodeName); 
alert (d.nodeValue); 
} 
</script> 
</head> 
<body> 
<table border=1> 
<tr> 
<td id="Will" name="myname">Will</td> 
<td id="smith">smith</td> 
</tr> 
</table> 
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<br /> 
<input type="button" onclick="getNodeProperty()"” value=" 点 击 获 取 属性 节点 属性 值 ” /> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.23.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-39 
所 示 。 

单 击 “ 点 击 获取 属性 节点 属性 值 ”按钮 ， 即 可 弹出 一 个 信息 提示 框 ， 显 示 运 行 的 结果 如 图 19-40 所 示 。 

再 连续 两 次 单 击 “ 确 定 ”按钮 ， 将 弹出 另外 两 个 信息 提示 框 ， 显 示 运 行 的 结果 如 图 19-41 所 示 。 


sx 口 x 
司 CheersqianguDoe 癌 - 0 | 局 局 45 扣 网 
文件 (六 名 个 二 本 VM) 收 基 夫 A) 工具 (D 大 了 人) 


来 所 网 页 的 消息 。 X 来 自 网 页 的 消息 x 


ye ye 


图 19-39 属性 节点 实例 图 19-40 ”信息 提示 框 图 19-41 运行 结果 
提示 : 运行 结果 ， 其 三 个 属性 的 值 分 别 为 : 
nodeType: 2，ATTRIBUTE NODE; 
nodeName: name， 属 性 名 ; 
nodeValue: myname， 属 性 值 。 


[illjgsaith 


点 击 获 了 属性 节点 属性 信 


19.5 操作 DOM 中 的 节点 


在 DOM 中 通过 使 用 节点 属性 与 方法 可 以 操作 DOM 中 的 节点 ， 如 访问 节点 、 创 建 节点 、 插 入 节点 等 。 


19.5.1 访问 节点 


使 用 getElementById() 方 法 可 以 访问 指定 id 的 节点 ， 并 用 nodeName 属性 、nodeType 属性 和 nodeValue 
属性 来 显示 出 该 节点 的 名 称 、 类 型 和 值 。 

下 面 给 出 一 个 实例 ， 该 实例 在 页 面 弹出 的 提示 框 中 ， 显 示 了 指定 节点 的 名 称 、 类 型 和 值 。 

【 例 19-24】〈 实 例文 件 ，ch19\Chap19.24.html》 访 问 节点 实例 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 访 问 指定 节点 </title> 

</head> 

<body id="bl"> 

<h3 > 个 人 主页 </h3> 

<b> 我 的 小 店 </b> 

<script language="javascript"> 
var by=document .getElementById ("bl1"); 
Var str; 
str=" 节 点 名 称 : "+by.nodeNamet"\n"; 
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str+=" 节 点 类 型 :"+by .nodeType+t"\n"; 
str+=" 节 点 值 :"+by .nodeValuet"\n"; 


alert (str); 


</script> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap19.24.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-42 
所 示 。 


jorgiDor 站 - X | 让 ES 后 


19-42 ”访问 指定 节点 


19.5.2 ”创建 节点 


创建 新 的 节点 首先 需要 通过 使 用 文档 对 象 中 的 createElement0 方 法 和 createTextNode( 方 法 ， 生 成 一 个 
新 元 素 ， 并 生成 文本 节点 ， 再 通过 使 用 appendChild0 方 法 将 创建 的 新 节点 添加 到 当前 节点 的 末尾 处 ， 
appendChild0 方 法 将 新 的 子 节点 添加 到 当前 节点 末尾 处 的 语法 格式 如 下 : 

node.appendchild (node) 

【 例 19-25】 实例 文件 ，ch19\Chap19.25.html》 创 建 节点 实例 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 创 建 节点 </title> 
</head> 
<body> 
<ul id="myList"><1i> 咖 啡 </1i><1i> 红 茶 </1i></ul> 
<p id="demo"> 单 击 按钮 将 项 目 添加 到 列表 中 ,从 而 创建 一 个 节点 </p> 
<button onclick="myFunction() "> 创建 节点 </button> 
<script> 
function myFunction(){ 
var node=document .createElement ("LI"); 
var textnode=document .createTextNode (" 开 水 ") 7 
node.appendchild (textnode) 7 
document .getElementById ("myList") .appendchild (node); 
} 
</script> 


<p><strong> 注 意 :</strong><br> 首 先 创 建 一 个 节点 , <br> 然后 创建 一 个 文本 节点 ,<br> 然 后 将 文本 节点 添加 到 LI 节点 
上 .<br> 最 后 将 节点 添加 到 列表 中 。</p> 


</body> 

</html> 

相关 的 代码 实例 请 参考 Chap19.25.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-43 
所 示 。 
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单 击 “创建 节点 ”按钮 ， 好 本 和 列 家 电 添 如 六 由 从 而 创建 一 个 节点 ， 如 图 19-44 所 示 。 


CueronDer DC | ar ” re 
en Wa EW Sash Tan smb SE ex IEm sm 


| 列 科 中 ， 从 而 创建 一 个 节 高 
单 击 近 包 项 目 千 加 到 列表 中 ， 从 而 创建 一 个 节点 


六 


和 中 


图 19-43 创建 节点 图 19-44 添加 项 目 并 创建 节点 


19.5.3 ”插入 节点 
通过 使 用 insertBefore( 方 法 可 在 已 有 的 子 节点 前 插入 一 个 新 的 子 节点 。 语 法 格式 如 下 ， 


node .insertBefore (newnode, existingnode) 
【 例 19-26】 实例 文件 ，ch19\Chap19.26.html) 插入 节点 实例 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 插 入 节点 </title> 
</head> 
<body> 
<ul id="myList1"><1i> 咖 啡 </1i><1i> 红 茶 </1i></ul> 
<ul id="myList2"><1i> 开 水 </1i><1i> 牛 奶 </1i></ul> 
<p id="demo"> 单 击 该 按钮 将 一 个 项 目 从 一 个 列表 移动 到 另 一 个 列表 ,从 而 完成 插入 节点 的 操作 </p> 
<button onclick="myFunction() "> 插入 节点 </button> 
<script> 
function myFunction(){ 
var node=document .getElementById("myList2") .lastchild; 
var list=document .getElementById("myList1"); 
list.insertBefore (node, list.childNodes[0]); // 把 node 插 到 list 前 面 


} 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.26.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-45 
所 示 。 
单 击 “ 插 入 节点 ”按钮 ， 即 可 将 一 个 项 目 从 一 个 列表 移动 到 另 一 个 列表 ， 从 而 插入 节点 ， 如 图 19-46 所 示 。 


和 cseraqgangupoc 人 -已 刁 生 和 A 
XH EE) EV dm/A IRT eH) 


京 按 乌 将 一 个 项 目 从 一 个 列表 黎 动 到 另 一 个 列表 ， 
成 活 入 节 志 的 深 作 


单 击 访 按 钮 将 一 个 项 目 从 一 个 列表 移动 到 另 一 个 列表 , 
从 而 完成 活 入 节点 的 译作 


语 入 节点 


十 入 节点 


19-45 插入 节点 图 19-46 ”移动 项 目 到 另 一 列表 
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2 19.5.4 ”删除 节点 


使 用 removeChild0 方 法 可 从 子 节点 列表 中 删除 某 个 节点 , 如 果 删 除 成 功 , 此 方法 可 返回 被 删除 的 节点 ， 
如 果 失 败 ， 则 返回 NULL。 具 体 的 语法 格式 如 下 : 

node.removeChild (node) 

【 例 19-27】〔 实 例文 件 ，ch19\Chap19.27.html》 删 除 节点 实例 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 删 除 节点 </title> 
</head> 
<body> 
<ul id="myList"><1i> 咖 啡 </1i><1i> 红 茶 </1i><1i> 和 牛奶 </1i></ul> 
<p id="demo"> 单 击 按钮 移 除 列表 的 第 一 项 , 从 而 完成 副 除 节点 操作 </P> 
<button onclick="myFunction() "> 删除 节点 </button> 
<script> 
function myFunction(){ 
var list=document.getElementById ("myList"); 
list.removechild (list.childNodes[0]); ”// 删 除 第 一 个 1i 
} 


可 


</script> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap19.27.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-47 
所 示 。 
单 击 “ 删 除 节点 ”按钮 ， 即 可 从 子 节点 列表 中 删除 某 个 节点 ， 从 而 完成 删除 节点 的 操作 ， 如 图 19-48 
所 示 。 
- D x - ODO x 
和 外 CAUsersqiangu\Doc D ~ 0 | 七 和 5 点 司 CNUsersmqiangu\Doc 卫 -上 | 情 册 点 
文人 (六 名 6) 豆 看 MI。 必 太夫 (A) 工具 MT) 帮 翅 (1) 文 #4(。 交手 ) 下 看 M。 必 羡 夫 从 工具 才 劝 (1) 
* 。 红茶 
A "牛奶 
单 击 按钮 移 除 列表 的 第 一 项 ， 从 而 完成 删除 节点 操作 
单 击 按钮 移 除 列表 的 第 一 项 ， 从 而 完成 删除 节 点 操作 i 
[sv] 
图 19-47 ”删除 节点 图 19-48 通过 按钮 删除 列表 第 一 项 


19.5.5 ”复制 节点 


使 用 cloneNode() 方 法 可 创建 指定 节点 的 精确 副本 ，cloneNode0 方 法 复制 所 有 属性 和 值 。 该 方法 将 复制 
f 返 回调 用 它 的 节点 的 副本 。 如 果 传递 给 它 的 参数 是 trwe， 它 还 将 递归 复制 当前 节点 的 所 有 子孙 节点 ， 否 
则 ， 它 只 复制 当前 节点 。 语 法 格式 如 下 : 

node.cloneNode (deep) 


【 例 19-28】 (实例 文件 ，ch19\Chap19.28.html) 复制 节 点 实例 。 
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<!DocTYPE html> 
<html> 
<head> 
<title> 复 制 节点 </title> 
</head> 
<body> 
<ul id="myList1"><1i> 咖 啡 </1i><1i> 红 茶 </1i></ul> 
<ul id="myList2"><1i> 开 水 </1i><1i> 牛 奶 </1i></ul> 
<p id="demo"> 单 击 按钮 将 项 目 从 一 个 列表 复制 到 另 一 个 列表 中 </P> 
<button onclick="myEFunction () "> 复制 节点 </button> 
<script> 
function myFunction(){ 
var itm=document.getElementById("myList2") .lastchild;  // 获 取 myList2 的 最 后 子 元 素 “ 牛 奶 ” 
var cln=itm.cloneNode (true); 
document .getElementById ("myList1") .appendchild (cln); 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.28.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-49 
所 示 。 

单 击 “ 复 制 节点 ”按钮 ， 即 可 将 项 目 从 一 个 列表 复制 到 另 一 个 列表 中 ， 从 而 完成 复制 节点 的 操作 ， 如 
19-50 所 示 。 


口 X - 口 x 
部 cWswaqawewbccP 0 | 大 mus (@ Daa | Bum 
交 件 站 城 祝 昌 Ei a ITAM RH) a 说 项 王 日 ”二 在 W)。 枚 若 容 / 工 居 TT) 才 贡 (H) 
。 曙 里 : 员 
+ 
对 条 :名 
“开水 
,2 。 开水 
所 -入 
单 击 按钮 将 项 目 从 一 个 列表 复 汀 到 另 一 个 列表 中 兰 击 按 争 将 项 目 从 一 个 列表 得 和 弄 | 另 一 个 列表 中 
区 TE 页 
图 19-49 复制 节点 图 19-50 复制 项 目 到 第 一 个 列表 中 


19.5.6 ”替换 节点 


使 用 replaceChild() 方 法 可 将 某 个 子 节点 替换 为 另 一 个 ， 这 个 新 节点 可 以 是 文本 中 已 存在 的 ， 或 者 是 用 
户 自己 新 创建 的 。 语 法 格式 如 下 : 

node.replaceChild (newnode, oldnode) 

【 例 19-29】 (实例 文件 ，ch19\Chap19.29.html) 替换 节点 实例 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 替 换 节点 </title> 

</head> 

<body> 

<ul id="myList"><1i> 啤 啡 </1i><1i> 红 茶 </1i><1i> 牛 奶 </1i></ul> 
<p id="demo"> 单 击 按钮 替换 列表 中 的 第 一 项 。</p> 
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<button onclick="myFunction() "> 替换 节点 </button> 

<script> 

function myFunction (){ 
var textnode=document -createTextNode ("开水 "); 
var item=document getElementById ("myList") .childNodes[0]; 
item.replaceChild (textnode, item.childNodes[0]); 

} 


</script> 
<p> 首 先 创建 一 个 文本 节点 。 <br> 然 后 替换 第 一 个 列表 中 的 第 一 个 子 节点 。</P> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap19.29.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-51 
所 示 。 
单 击 “替换 节点 ”按钮 ， 即 可 替换 列表 中 的 第 一 项 ， 从 而 完成 替换 节点 的 操作 ， 如 图 19-52 所 示 。 
@ cvsmees:e Ga 和 @ 国 ceergirg Apo Do Er 3 
文件 (站 杭 后 E) 至 吾 [V) 履 其 夫人 A) 工具 (T) 太 职 (H) 交付 由) 锭 加 [E] 吾 在 (V) 水 臣 冯 (A) 工 具 [ 门 。 划 动 (H| 
* 开水 
。 红 条 
“车 蕊 


单 击 按钮 首 拱 列表 中 的 第 一 项 单 十 按 乌 普 换 列表 中 的 第 一 项 


[部 福 ] 
庆生 这 人 和 pe 一， 
图 19-51 替换 节点 图 19-52 ”替换 列表 中 的 第 一 项 
注意 : 这 个 例子 只 将 文本 节点 的 “咖啡 ”替换 为 “开水 ”， 而 不 是 整个 LI 元 素 ， 这 也 是 替换 节点 的 一 


种 方法 。 


19.6 ”使 用 非 标准 DOM innerHTML 属性 


HTML 文档 中 每 一 个 元 素 节点 都 有 innerHTML 属性 , 通过 对 这 个 属性 的 访问 可 以 获取 或 者 设置 这 个 元 
素 节点 标签 内 的 HIML 内 容 。 
【 例 19-30】 (〈 实 例文 件 ， chl9\Chap19.30.html) innerHTML 属性 使 用 实例 。 


<!DOCTYPE html> 
<html> 
<head> 
<title>innerHTML 属性 </title> 
<script language="javascript"> 
function myDOMInnerHTML () { 
var myDiv=document.getElementById ("myTest"); 
alert (myDiv.innerHTML); // 直 接 显示 innerHTML 的 内 容 
// 修 改 innerHTML, 可 直接 添加 代码 
myDiv.innerHTML="<img src="'02.jpg' title=' 美 丽 风光 '>"; 


} 

</script> 

</head> 

<body onload="myDOMInnerHTML () "> 
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<div id="myTest"> 
<span> 图 库 </span> 
<p> 这 是 一 行 用 于 测试 的 文字 </p> 
</div> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap19.30.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-53 
所 示 。 
单 击 “确定 ”按钮 ， 即 可 在 页 面 中 显示 相关 效果 ， 如 图 19-54 所 示 。 


@ 半 coernaoraiDoe ~ | 戈 retin 
Xn HED SV mAN IRT SiH 


来 各 网 页 的 消息 x 


人 pone 


<p> 这 旺 一 行 用 于 关 的 文字 </p> 


图 19-53 ”信息 提示 框 图 19-54 ”显示 运行 结果 


提示 : 上 述 代 码 中 首先 获取 myTest, 然后 显示 出 其 中 所 有 的 innerHTML, 最 后 将 myTest 的 innerHTML 
修改 为 图 片 ， 并 显示 出 来 。 


19.7 DOM 与 CSS 


DOM 允许 JavaScript 改变 HTML 元 素 的 CSS 样式 ， 下 面 详细 介绍 改变 CSS 样式 的 方法 。 


19.7.1 改变 CSS 
通过 JavaScript 和 HTML DOM 可 以 方便 地 改变 HIML 元 素 的 CSS 样式 。 语 法 如 下 : 


document .getElementById (id) .style.property= 新 样式 


【 例 19-31】 实例 文件 ，ch19\Chap19.31.html) DOM 与 CSS 改变 样式 实例 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>DOMCSS 实例 </title> 
<script type="text/javascript"> 
function changestyle() 

{ 


document .getElementById("p2") .style.color="blue"; 
document .getElementById("p2") .style.fontFamily="Arial"; 
document .getElementById ("p2") .style.fontsize="larger"; 
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</script> 

</head> 

<body> 

<p id="pl"> 一 望 二 三 里 </p> 

<p id="p2"> 烟 村 四 五 家 </p> 

<br /> 

<input type="button"” onclick="changeStyle () "value=" 修 改 段落 2 样式 ” /> 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap19.31.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-55 
所 示 。 
单 击 “ 修 改 段落 2 样式 ”按钮 ， 即 可 修改 段落 2“ 烟 村 四 五 家 ”的 颜色 、 字 体 及 字体 大 小 ， 运 行 之 后 


效果 如 图 19-56 所 示 。 
< 口 be 本 口 x 
(© © Bre ©| Boovesssm 和 EEC 
文件 (站 总 晶 上 日。 理 看 (V) 。 改 闵 夫人 工 志 (转动 (Hl 文件 站。 和 三 日 ” 坦 看 Y) 。 贞 玖 宪 /A) 工具 [Tm 才 芭 (H) 
一 芋 三 三 呈 一 望 = 三 里 
烟 村 四 五 家 烟 村 四 五 家 
多 下 本 2 村 式 | [ELE 
图 19-55 DOM 与 CSS 改变 样式 实例 图 19-56 ”修改 段落 样式 


19.7.2 “三 位 一 体 ”的 页 面 


网 页 的 内 容 可 以 分 为 结构 层 、 表 现 层 和 行为 层 三 部 分 ， 下 面 分 别 进行 介绍 。 
结构 层 ， 由 HTML 或 XHTML 之 类 的 标记 语言 负责 创建 ， 元 素 标签 ) 对 页 面 各 个 部 分 的 含义 做 出 描 
述 ， 例 如 <ul> 元 素 表示 这 是 一 个 项 目 列表 。 

表现 层 ， 由 CSS 来 创建 ， 即 如 何 显示 这 些 内 容 ， 如 采用 蓝 色 、Arial 字体 显示 。 

行为 层 ， 负责 内 容 应 该 如 何 对 事件 做 出 反应 ， 由 JavaScript 和 DOM 完成 。 

页 面 的 表现 层 和 行为 层 总 是 存在 的 ， 即 使 没有 明确 地 给 出 具体 的 定义 和 指令 它们 依然 存在 。 因 为 Web 
浏览 器 会 把 它 的 默认 样式 和 默认 事件 加 载 到 网 页 的 结构 层 上 。 如 浏览 器 会 在 呈现 文本 的 地 方 留 出 页 边 距 ， 
会 在 用 户 把 鼠标 指针 移动 到 某 个 元 素 上 方 时 弹出 title 属性 提示 框 ， 等 等 。 

提示 : 当然 这 三 层 技 术 也 是 存在 重 登 的 ， 如 用 DOM 来 改变 页 面 的 结构 层 、createElement0 等 ，CSS 中 
也 有 hover 这 样 的 伪 属 性 来 控制 鼠标 指针 滑 过 某 个 元 素 的 样式 。 


19.7.3 ”使 用 className 属性 


之 前 的 DOM 都 是 与 结构 层 打交道 ， 如 查找 、 添 加 节点 等 ， 而 DOM 还 有 一 个 非常 实用 的 className 属 
性 ， 可 以 修改 节点 的 CSS 样式 。 
【 例 19-32】 实例 文件 ，ch19\Chap19.32.html》className 属性 实例 。 


<!DOCTYPE html> 
<html> 
<head> 
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<title>className 属性 </title> 
<style type="text/css"> 
-myULl{ 
Color:#0000FF; 
Font-family:Arial; 
Font-weight:bold7 
上 
-myUL2{ 
Color:#FF00007 
Font-family:Georgia, "Times New Roman"Times, serif; 
Font-size:large; 
| 
</style> 
<script language="javascript"> 
function changestyleclassName (){ 
var oMy=document .getElementsByTagName ("ul") [0]; 
oMy.className="myUL2"; 
</script> 
</head> 
<body> 
<ul class="myUL1"> 
<1i> 旧 时 王 谢 堂前 燕 </1i> 
<1i> 飞 入 寻常 百姓 家 </1i> 
</ul> 
</br> 
<input type="button" onclick="changestyleCclassName();"” value=" 修 改 CSS 样式 ” /> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap19.32.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 19-57 
所 示 。 
单 击 “修改 CSS 样式 ”按钮 ， 即 可 修改 文本 样式 ， 并 显示 修改 后 的 效果 ， 如 图 19-58 所 示 。 


= 人 区 - 0O x 


@ 图 cAUsers\qiangu\Doc 只 - 上 | 感 dassName 是 性 @ 司 cAUsers\qiangu\Doc 只 - 上 | 居 className 必 性 
文件 (月 ” 编 强 (E) 吾 看 (V) 收藏 志 (A) 工具 (T) 帮助 (H) 文件 () ” 妨 纺 (E) 查看 V) 收藏 夫 (A) 工具 (T) 帮助 (H) 
* 旧时 王 谢 堂 前 菩 “* 旧时 王 谢 堂 前 燕 
， 飞 入 寻常 百姓 家 。， 飞 入 寻常 百姓 家 
ES [ER 
图 19-57 ClassName 属性 的 应 用 图 19-58 显示 修改 后 的 效果 


提示 : 上 述 代码 在 单 击 列表 时 将 <ul> 标 记 的 className 属性 进行 了 修改 ， 用 myUL2 覆盖 了 myUL1 的 
样式 。 
19.7.4 通过 className 添加 CSS 


前 面 介 绍 了 通过 修改 className 属性 可 以 替换 CSS 样式 ,修改 className 属性 是 对 CSS 样式 进行 替换 ， 
而 不 是 添加 ， 但 很 多 时 候 并 不 希望 将 原 有 的 CSS 样式 覆盖 ， 这 时 完全 可 以 采取 追加 方式 ， 前 提 是 保证 追加 


431 


i ess 3+JavaScript 从 入 门 到 项 目 实践 ( 超 信 版 ) 
NE 


的 Css 类 别 中 的 各 个 属性 与 原来 的 属性 不 重复 ， 代 码 如 下 : 
ER 


19.8 制作 树 形 导航 菜单 


树 形 导航 菜单 是 网 页 设计 中 最 常用 的 菜单 之 一 ， 下 面 制 作 一 个 树 形 菜单 。 
步骤 1: 设计 HTML 框架 ， 具 体 的 代码 如 下 : 
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相关 的 代码 实例 请 参考 Chap19.33.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-59 
所 示 。 


原 本 
| Bev Se “国人 | 


图 19-59 制作 树 形 导航 菜单 框架 
步骤 2: 在 页 面 中 添加 JavaScript 代码 ， 实 现 单 击 展开 效果 ， 具 体 代码 如 下 : 


fn Ress 3+JavaScript 从 入 门 到 项 目 实践 ( 超 信 版 ) 
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span.className = "add'"7 
if (nextnode (labels[i] .nextSibling) ssnextnode (labels[i] .nextSibling) .nodeName == 'UL') 
labels[i] .parentNode.insertBefore (span, labels [i]); 
else 
labels[i] .className = "rem' 
} 
</script> 


相关 的 代码 实例 请 参考 Chap19.33.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-60 


所 示 。 


EE 
men RE BEV ORY IRM Won 


9-60 添加 JavaScript 代码 


步骤 3， 在 网 页 中 添加 CSS 代码 ， 对 菜单 进行 风格 设置 ， 具 体 代 码 如 下 : 


<style type="text/css"> 

body{margin:0;padding:0;font:12px/1.5 Tahoma,Helvetica,Arial, sans-serif;} 

ul,1i, {margin:0;padding:0;} 

ul{list-style:none;} 

#menu zzjs net{margin:10px;width:200px;overflow:hidden;} 

#menu zzjs net li{line-height:25px;} 

#menu zzjs net .rem{padding-left:16px;} 

#menu zzjs net .add{background:url(/img/tree 20110125zzjs net.gif) -4px -31px no-repeat;} 

#menu zzjs net .ren{background:url(/img/tree 20110125zzjs net.gif) -4px -7px no-repeat;} 

#menu zzjs net 1i a{color:#666666;padding-left:5px;outline:none;blr:expression (this.onFocus= 
this.blur());} 

#menu zzjs net 1i input{vertical-align:middle;margin-left:Spx;} 

#menu zzjs net .two{padding-left:20px;display:none;} 

</style> 


相关 的 代码 实例 请 参考 Chap19.33.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 19-61 


所 示 。 


辣 cuewsqanawpec P "| Bmore 
HNN MUD BEV WBN IEm 和 


19-61 添加 CSS 代码 修改 文字 样式 
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19.9 ”就 业 面试 技巧 与 解析 


19.9.1 面试 技巧 与 解析 (一) 


应 聘 者 : 你 怎样 看 待 自己 的 失败 ? 
应 聘 者 : 我 相信 大 部 分 人 都 不 是 十 全 十 美的 ， 如 果 有 第 二 次 机 会 ， 我 相信 我 会 改 于 


19.9.2 ”面试 技巧 与 解析 (二 ) 


面试 官 : 在 工作 中 什么 会 让 你 有 成 就 感 ? 
应 聘 者 : 为 我 所 在 公司 竭力 效劳 ， 尽 我 所 能 ， 成 功 完成 一 个 项 目 。 
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三 学 习 指 引 


事件 是 文档 或 者 浏览 器 窗口 中 发 生 的 、 特 定 的 交互 瞬间 ， 是 用 户 或 浏览 器 自身 执行 的 某 种 动作 ， 如 click、 
load 和 mouseover 都 是 事件 的 名 字 ， 可 以 说 事件 是 JavaScript 和 DOM 之 间 交 互 的 桥梁 ， 事 件 发 生 时 ， 调 用 
它 的 处 理 函 数 执行 相应 的 JavaScript 代码 并 给 出 响应 。 本 章 介 绍 JavaScript 的 事件 机 制 。 


X” 重点 导读 


。 了 解 事件 的 含义 。 

。 掌 握 JavaScript 事件 的 调用 方法 。 

。 掌 握 JavaScript 常用 事件 的 使 用 方法 。 
。 掌 握 JavaScript 处 理事 件 的 方式 。 

。 掌 握 操作 事件 对 象 的 方法 。 

* 掌握 事件 模拟 的 方法 。 


20.1 什么 是 事件 


JavaScript 的 事件 可 以 用 于 处 理 表单 验证 、 用 户 输入 、 用 户 行为 及 浏览 器 动作 , 如 页 面 加 载 时 触发 事件 、 
页 面 关 闭 时 触发 事件 、 用 户 单 击 按钮 执行 动作 、 验 证 用 户 输入 内 容 的 合法 性 等 。 

事件 将 用 户 和 Web 页 面 连接 在 一 起 ， 使 用 户 可 以 与 用 户 进行 交互 ， 以 响应 用 户 的 操作 ， 如 浏览 器 载 入 
文档 或 用 户 动作 诸如 敲 击 键盘 、 滚 动 鼠标 等 触发 ， 而 事件 处 理 程序 则 说 明 一 个 对 象 如 何 响应 事件 。 在 早期 
支持 JavaScript 脚本 的 浏览 器 中 ， 事 件 处 理 程序 是 作为 HTML 标记 的 附加 属性 加 以 定义 的 ， 其 形式 如 下 : 

<input type="button” name="MyButton" value="Test Event" onclick="MyEvent () "> 

目前 ，JavaScript 的 大 部 分 事件 命名 都 是 描述 性 的 ， 如 click、submit、mouseover 等 ， 通 过 其 名 称 就 可 
以 知道 其 含义 ， 一 般 情况 下 ， 在 事件 名 称 之 间 添 加 前 缀 ， 如 对 于 click 事件 ， 其 处 理 器 名 为 onclick。 

另外 ，JavaScript 的 事件 不 仅仅 局 限于 鼠标 和 键盘 操作 ， 也 包括 浏览 器 状态 的 改变 ， 如 绝 大 部 分 浏览 器 
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支持 类 似 resize 和 load 这 样 的 事件 等 。Load 事件 在 浏览 器 载 入 文档 时 被 触发 ， 如 果 某 事件 要 在 文档 载 入 时 
被 触发 ， 一 般 应 该 在 <body> 标 记 中 加 入 如 下 语句 : 

"onload="MyFunction()""; 

事件 可 以 发 生 在 很 多 场合 , 包括 浏览 器 本 身 的 状态 和 页 面 中 的 按钮 、 链接 、 图 片 、 层 等 。 同时 根据 DOM 
模型 ， 文 本 也 可 以 作为 对 象 ， 并 响应 相关 的 动作 ， 如 单 击 鼠 标 、 文 本 被 选择 等 。 


20.2” JavaScript 事件 的 调用 方式 


事件 通常 与 函数 配合 使 用 ， 这 样 就 可 以 通过 发 生 的 事件 来 驱动 函数 执行 ， 在 JavaScript 中 , 事件 调用 的 
方式 有 两 种 ， 下 面 分 别 进 行 介绍 。 


20.2.1 在 script 标签 中 调用 


在 script 标签 中 调用 事件 是 JavaScript 事件 调用 方式 当中 比较 常用 的 一 种 方式 ， 在 调用 过 程 中 ， 首 先 需 
要 获取 要 处 理 对 象 的 引用 ， 然 后 将 要 执行 的 处 理 函 数 赋值 给 对 应 的 事件 。 
【 例 20-1】〔 实 例文 件 ，ch20\Chap20.1.html》 显 示 系 统 时 间 实 例 1。 


<!DocTYPE html> 
<html> 
<head> 
<title> 在 script 标签 中 调用 </title> 
</head> 
<body> 
<p> 点 击 按钮 执行 em>displayDate () </em> 函 数 ,显示 当前 时 间 信 息 </p> 
<button id="myBtn"> 显 示 时 间 </button> 
<script> 
document .getElementById ("myBtn") .onclick=function() {displayDate()}; 
function displayDate () { 
document .getElementById ("demo") . innerHTML=Date (); 


} 

</script> 

<p id="demo"></p> 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap20.1.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 的 结果 如 图 20-1 所 示 。 
单 击 “ 显 示 时 间 ” 按 钮 ， 即 可 在 页 面 中 显示 出 当前 系统 的 日 期 和 时 间 信 息 ， 如 图 20-2 所 示 。 


-oo * 三 
国 CAseragiangilDoc D - © | BEEecripnSeT x 国 ChsersqiangulDor 站 -6 | 大 Ecrpt5 和 Px 

| HN WU) HEV tah IRM WOO xD Wu) EV wa) IAM WO 

点 击 按 包 执行 displayDate() 函数 ， 显 示 当 前 时 间 信息 点 击 按钮 执行 displayDate() 函 数 ， 显 示 当 前 时 间 信息 


[8 示 时 间 ] 


7 12:46:55 6MT+0800 (中 国标 准时 间 ) 


R100% ~ 


图 20-1 程序 运行 结果 图 20-2 显示 日 期 和 时 间 信 息 
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注意 : 在 上 述 代码 中 使 用 了 onclick 事件 ， 可 以 看 到 该 事件 处 于 script 标签 中 。 另 外 ， 在 JavaScript 中 
指定 事件 处 理 程序 时 ， 事 件 名 称 必 须 小 写 ， 才 能 正确 响应 事件 。 


20.2.2 ”在 元 素 中 调用 


在 HTML 元 素 中 调用 事件 处 理 程序 时 ， 只 需要 在 该 元 素 中 添加 响应 的 事件 ， 并 在 其 中 指定 要 执行 的 代 
码 或 者 函数 名 即 可 。 

下 面 给 出 一 个 实例 ， 也 是 用 于 显示 当前 系统 的 日 期 和 时 间 的 ， 读 者 可 以 和 【 例 20-1 】 的 相关 代码 进行 
对 比 ， 虽 然 实现 的 功能 一 样 ， 但 是 代码 却 是 不 一 样 的 。 

【 例 20-2】 (实例 文件 ，ch20\Chap20.2.html) 显示 系统 时 间 实 例 2。 


<!DocTYPE html> 
<html> 
<head> 
<title> 在 元 素 中 调用 </title> 
</head> 
<body> 
<p> 点 击 按钮 执行 em>displayDate ()</em> 函 数 , 显示 当前 时 间 信 息 </P> 
<button onclick="displayDate() "> 显示 时 间 </button> 
<script> 
function displayDate (){ 
document .getElementById ("demo") .innerHTML=Date (); 
时 


</script> 
<p id="demo"></p> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap20.2.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-3 
所 示 。 
单 击 “显示 时 间 ” 按 钮 ， 即 可 在 页 面 中 显示 出 当前 系统 的 日 期 和 时 间 信 息 ， 如 图 20-4 所 示 。 
司 cseremqiangupocP -CC ne < @ 司 cuesereqiangupocP -上 i 
文体 站 入] 查看 (V)。 改 硬 闪 A)。 工具 (天 二 (H) 了 站 “有 台 日。 下 看。 三 = 工具 站。 大 了) 
点 击 按钮 执行 displayDate() 函 数 ， 显 示 当 前 时 间 信息 点 击 按钮 执行 displayDate() 函 数 ， 显 示 当 前 时 间 信息 
[maa ] [Re 
Fri Nov 03 2017 12:58:49 6MT+0800 (中 国标 准时 间 ) 
R100% > 大 100% ~ 
图 20-3 ”程序 运行 结果 图 20-4 显示 日 期 和 时 间 信 息 


注意 : 在 上 述 代码 中 使 用 了 onclick 事件 ， 可 以 看 到 该 事件 处 于 button 元 素 之 间 ， 这 就 是 向 按钮 元 素 分 
配 了 onclick 事件 。 


20.3 JavaScript 常用 事件 


JavaScript 的 常用 事件 有 很 多 ， 如 鼠标 键盘 事件 、 表 单 事件 、 网 页 相关 事件 等 ， 下 面 以 表格 的 形式 对 各 
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事件 进行 说 明 ，JavaScript 的 相关 事件 如 表 20-1 所 示 。 
表 20-1 JavaScript 的 相关 事件 


分 类 事 件 说 明 
onkeydown 某 个 键盘 的 键 被 按 下 时 触发 此 事件 
onkeypress 某 个 键盘 的 键 被 按 下 或 按 住 时 触发 此 事件 
onkeyup 某 个 键盘 的 键 被 松 开 时 触发 此 事件 
onclick 鼠标 单 击 某 个 对 象 时 触发 此 事件 
ondblclick 鼠标 双击 某 个 对 象 时 触发 此 事件 
onmousedown 某 个 鼠标 按键 被 按 下 时 触发 此 事件 

鼠标 键盘 事件 onmousemove 鼠标 被 移动 时 触发 此 事件 
onmouseout 鼠标 从 某 元 素 移 开 时 触发 此 事件 
onmouseover 鼠标 被 移 到 某 元 素 之 上 时 触发 此 事件 
onmouseup 某 个 鼠标 按键 被 松 开 时 触发 此 事件 
onmouseleave 当 鼠 标 指针 移出 元 素 时 触发 此 事件 
onmouseenter 当 鼠 标 指针 移动 到 元 素 上 时 触发 此 事件 
oncontextmenu 在 用 户 单 击 鼠标 右键 打开 上 下 文 菜单 时 触发 此 事件 
onload 某 个 页 面 或 图 像 被 完成 加 载 时 触发 此 事件 
onabort 图 像 加 载 被 中 断 时 触发 此 事件 
onerror 当 加 载 文档 或 图 像 时 发 生 某 个 错误 触发 此 事件 
onresize 当 浏览 器 的 窗口 大 小 被 改变 时 触发 此 事件 
页 面相 关 事件 onbeforeunload 当前 页 面 的 内 容 将 要 被 改变 时 触发 此 事件 
onunload 当前 页 面 将 被 改变 时 触发 此 事件 
Onhashchange 该 事件 在 当前 URL 的 锚 部 分 发 生 修改 时 触发 
Onpageshow 该 事件 在 用 户 访问 页 面 时 触发 
Onpagehide 该 事件 在 用 户 离开 当前 网 页 跳 转 到 另外 一 个 页 面 时 触发 
Onscroll 当 文 档 被 滚动 时 发 生 的 事件 
onreset 当 重 置 按 钮 被 单 击 时 触发 此 事件 
onblur 当 元 素 失去 焦点 时 触发 此 事件 
onchange 当 元 素 失去 焦点 并 且 元 素 的 内 容 发 生 改 变 时 触发 此 事件 
表单 相关 事件 onsubmit 当 提交 按钮 被 单 击 时 触发 此 事件 
onfocus 当 元 素 获得 焦点 时 触发 此 事件 
onfocusin 元 素 即将 获取 焦点 时 触发 
onfocusout 元 素 即将 失去 焦点 时 触发 
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续 表 
分 类 事 件 说 明 
oninput 元 素 获 取 用 户 输入 时 触发 
表单 相关 事件 onsearch 用 户 向 搜索 域 输入 文本 时 触发 (<input="search">) 
‘onselect 用 户 选 取 文 本 时 触发 (<input> 和 <textarea>) 
ondrag 该 事件 在 元 素 正在 拖 动 时 触发 
ondragend 该 事件 在 用 户 完成 元 素 的 拖 动 时 触发 
ondragenter 该 事件 在 拖 动 的 元 素 进入 放置 目标 时 触发 
拖 动 相关 事件 ondragleave 该 事件 在 拖 动 元 素 离开 放置 目标 时 触发 
ondragover 该 事件 在 拖 动 元 素 在 放置 目标 上 时 触发 
ondragstart 该 事件 在 用 户 开 始 拖 动 元 素 时 触发 
ondrop 该 事件 在 拖 动 元 素 放 置 在 目标 区 域 时 触发 
onselect 当 文本 内 容 被 选择 时 触发 此 事件 
onselectstart 当 文 本 内 容 的 选择 将 开始 发 生 时 触发 此 事件 
编辑 相关 事件 oncopy 当 页 面 当前 的 被 选择 内 容 被 复制 后 触发 此 事件 
oncut 当 页 面 当 前 的 被 选择 内 容 被 剪 切 时 触发 此 事件 
‘onpaste 当 内 容 被 粘贴 时 触发 此 事件 
打印 事件 onafterprint 该 事件 在 页 面 已 经 开始 打印 ， 或 者 打印 窗口 已 经 关闭 时 触发 
onbeforeprint 该 事件 在 页 面 即将 开始 打印 时 触发 


20.3.1 鼠标 相关 事件 


鼠标 事件 是 在 页 面 操作 中 使 用 最 频繁 的 操作 ， 可 以 利用 鼠标 事件 在 页 面 中 实现 鼠标 移动 、 单 击 时 的 特 
殊 效果 。 


1. 鼠标 单 击 事件 

单 击 事件 (onclick) 是 在 鼠标 单 击 时 被 触发 的 事件 ， 单 击 是 指 鼠 标 指针 停留 在 对 象 上 ， 按 下 鼠标 键 ， 
在 没有 移动 鼠标 指针 的 同时 释放 鼠标 键 的 这 一 完整 过 程 。 

下 面 给 出 一 个 实例 ， 通 过 单 击 按钮 ， 动 态 变换 背景 颜色 ， 当 用 户 再 次 单 击 按钮 时 ， 页 面 背景 将 以 不 同 
的 颜色 进行 显示 。 

【 例 20-3】 实例 文件 ，ch20\Chap20.3.html) 动态 改变 背景 颜色 。 

<!DOCTYPE HTML> 

<html> 

<head> 

<title> 通 过 按钮 变换 背景 颜色 </title> 

</head> 

<body> 

<script language="javascript"> 

Var Arraycolor=new Array ("teal", "red", "blue", "navy", "lime", "green", "purple", "gray", "yellow", "white"); 
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Var n=0; 
function turncolors(){ 
if (n==(Arraycolor.length-1)) n=0; 
n++; 
document .bgColor = Arraycolor[n]; 
} 
</script> 
<form name="forml" method="post" action=""> 
<p> 
<input type="button"” name="Submit"” value=" 变 换 背 景 颜色 " onclick="turncolors()"> 


</p> 
<p> 使 用 按钮 动态 变换 背景 颜色 </p> 
</form> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap20.3.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-5 
所 示 。 
单 击 “变换 背景 颜色 ”按钮 ， 即 可 改变 页 面 的 背景 颜色 ， 图 20-6 中 背景 的 颜色 为 红色 。 


口 X 口 x 
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图 20-5 程序 运行 结果 图 20-6 将 背景 的 颜色 改 为 红色 


提示 : 筷 标 事件 一 般 应 用 于 Button 对 象 、CheckBox 对 象 、Image 对 象 、Link 对 象 、Radio 对 象 、Reset 
对 象 和 Submit 对 象 。 其 中 ，Button 对 象 一 般 只 会 用 到 onclick 事件 处 理 程序 ， 因 为 该 对 象 不 能 从 用 户 那 里 
得 到 任何 信息 ， 如 果 没 有 onclick 事件 处 理 程序 ， 按 钮 对 象 将 不 会 有 任何 作用 。 

2. 鼠标 按 下 与 松 开 事件 
鼠标 的 按 下 事件 为 oomousedown 事件 , 在 onmousedown 事件 中 , 用户 把 鼠标 指针 放 在 对 象 上 按 下 鼠标 
键 时 触发 。 例 如 在 应 用 中 ， 有 时 需要 获取 在 某 个 div 元 素 上 鼠标 按 下 时 的 鼠标 位 置 (x、y 坐标 ) 并 设置 鼠 
标的 样式 为 “ 手 型 ”。 
鼠标 的 松 开 事件 为 oomouseup 事件 。 在 onmouseup 事件 中 ， 用 户 把 鼠标 指针 放 在 对 象 上 鼠标 按键 被 按 
下 的 情况 下 ， 放 开 鼠 标 键 时 触发 。 如 果 接 收 鼠标 键 按 下 事件 的 对 象 与 鼠标 键 放 开 时 的 对 象 不 是 同一 个 对 象 ， 
那么 onmouseup 事件 不 会 触发 。onmousedown 事件 与 onmouseup 事件 有 先后 顺序 ， 在 同一 个 对 象 上 前 者 在 
先后 者 在 后 。onmouseup 事件 通常 与 onmousedown 事件 共同 使 用 控制 同一 对 象 的 状态 改变 。 

【 例 20-4】 〈 实 例文 件 ，ch20\Chap20.4.html) 按 下 鼠标 改变 超 链接 文本 颜色 。 


<!DOCTYPE html> 
<html> 
<head> 


<title> 改 变 超 链 接 文 本 颜色 </title> 


<script> 


function myFunction (elmnt,clr){ 
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elmnt.style.color=clr; 
</script> 
</head> 
<body> 
<p onmousedown="myFunction (this, 'red')" onmouseup="myFunction (this, 'green')"> 
<u> 按 下 鼠标 改变 超 链 接 文本 颜色 </u> 
</p> 


</body> 
</html> 
相关 的 代码 实例 请 参考 Chap20.4.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-7 
所 示 。 
单 击 网 页 中 的 文本 即 可 改变 文本 的 颜色 ， 这 里 文本 的 颜色 变 为 红色 ， 结 果 如 图 20-8 所 示 。 
- 口 x ~ 局 入 
司 CAUsers\qjangu\Doc 站 ”| 大 zeiEi 接 文本 颜 包 间 CNUsersqiangu\Doc 只 ”0 大 以 让 入 文本 闫 色 
文 作 (D。 妨 纺 E) ”二 看 (V) 收 训 夫 (A) 工具 Mm 帮 有 (0H) 文 必 品 ”名 有 日 查看 M。 收 吉 x 工具 [帮助 (H) 
控 下 镶 标 改变 超 链 亡 立 本 亲 色 拉 下 和 标 改 柱 超 链 撞 广 本 颜色 
收 1008% > 100% ~ 
图 20-7 ”程序 运行 结果 图 20-8 将 文本 的 颜色 变 为 红色 


松 开 鼠 标 后 ， 文 本 的 颜色 将 变 成 绿色 ， 如 图 20-9 所 示 。 


= 如 总 
站 Qsers\qiangu\Doc DC 大 光 起 梯 按 文 本 部 色 
文件 站 要 纺 (得 看 (V】 区 到 工具 MT) 帮助 0 


控 下 鼠标 改变 超 链 皖 文 本 黄色 


扎 100% ~ 


图 20-9 将 文本 的 颜色 变 成 绿色 


3. 鼠标 移入 与 移出 事件 
鼠标 的 移入 事件 为 onmouseover 事件 。onmouseover 事件 在 鼠标 指针 进入 对 象 范围 〈 移 到 对 象 上 方 ) 时 
触发 。 具 体 实例 代码 如 下 : 
<td onmouseover="modstyle (this)" onmouseout="recoverstyle (this)"> 
当 妃 标 指针 进入 单元 格 时 ， 触 发 opmouseover 事件 ， 调 用 名 称 为 omdStyle 的 事件 处 理 函 数 ， 完 成 对 单元 
格 样式 的 更 改 。onmouseover 事件 可 以 应 用 在 所 有 的 HTML 页 面 元 素 中 ， 例 如 ， 鼠 标 指针 经 过 文字 上 方 时 ， 
显示 效果 为 “鼠标 曾经 过 上 面 ” 鼠标 指针 离开 后 ， 显 示 效 果 为 “鼠标 没有 经 过 上 面 ”， 其 实现 方法 如 下 ， 
<font size="20" color="#FF0000" 
onmouseover="this.color='#000000';this.innerText=' 鼠 标 曾经 过 上 面 .'"> 
鼠标 没有 经 过 上 面 - 
</font> 
鼠标 的 移出 事件 为 onmouseout 事件 。 onmouseout 事件 中 鼠标 指针 离开 对 象 时 触发 。onmouseout 事件 通 
常 与 onmouseover 事件 共同 使 用 改变 对 象 的 状态 。 
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例如 ， 当 鼠标 指针 移 到 一 段 文字 上 方 时 ， 文 字 颜 色 显 示 为 红色 ， 当 鼠标 指针 离开 文字 时 ， 文 字 恢 复原 


来 的 黑色 ， 其 实现 代码 如 下 : 


<font onmouseover ="this.style.color='red'” onmouseout="this.style.color="black""> 文 字 颜 色 改 变 </font> 


【 例 20-5】〔 实 例文 件 ，ch20\Chap20.5.html》 移 动 鼠 标 指针 时 改变 图 片 大 小 。 


<!DocTYPE html> 
<html> 
<head> 
<title> 改 变 图 片 大 小 </title> 
<script> 
function bigImg (x) { 
x.style.height="64px"; 
x.style.width="64px"; 
} 
function normalImg (x) { 
x.style.height="32px"; 
x.style.width="32px"; 
} 
</script> 
</head> 
<body> 
<img onmouseover="bigImg (this) " onmouseout="normalImg (this)" border="0" src="smiley.gif" alt="Smiley" 


width="32" height="32"> 


所 示 。 


</body> 
</html> 
相关 的 代码 实例 请 参考 Chap20.5.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-10 
将 鼠标 指针 移动 到 笑脸 图 片上 ， 即 可 将 笑脸 图 片 变 大 显示 ， 如 图 20-11 所 示 。 
刁 CNUsereqiangwpocD - 本 站 @ 着 cAUcerc\qiangu\Doc DO - 司 六 二 
六 伯 (久久 (查看 (V) 必 基 (A) 工具 (Tm 邦和 (H) 文件 月 顽 久 日。 至 看 (V) 收 基 六 工具 (T) 帮 肘 CH) 
9 着 
BR 
R00% 人 100% 
图 20-10 程序 运行 结果 图 20-11 将 笑脸 图 片 变 大 显示 


4. 鼠标 移动 事件 
鼠标 移动 事件 (onmousemove) 是 鼠标 在 页 面 上 进行 移动 时 触发 事件 处 理 程序 ， 下 面 给 出 一 个 实例 ， 


在 状态 栏 中 显示 鼠标 指针 在 页 面 中 的 当前 位 置 ， 该 位 置 使 用 坐标 表示 。 
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【 例 20-6】 实例 文件 ，ch20\Chap20.6.html) 显示 鼠标 在 页 面 中 的 位 置 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<title> 显 示 鼠 标 指针 在 页 面 中 的 当前 位 置 </title> 
</head> 

<body> 

<script language="javascript"> 
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var x=0,y=0; 
function MousePlace() 
{ 

x=window.event .x; 

y=window.event.y; 

window.status="X: "+x+" "+"Y: "+y; 
} 
document .onmousemove=MousePlace; 


</script> 

在 状态 栏 中 显示 了 鼠标 指针 在 页 面 中 的 当前 位 置 。 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap20.6.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-12 所 
示 。 移 动 鼠 标 指针 ， 可 以 看 到 状态 栏 中 鼠标 的 坐标 数值 也 发 生 了 变化 。 


= 酒 ， 医 
司 CNUsersqanguiDoc PO © EAAFENP.. * 

文件 由 扰 术 (E) 查看 (收藏 关 A) 工具 (T 到 (H) 

在 状态 栏 中 显示 了 鼠标 在 页 面 中 的 当前 位 置 


IX: 244 Y: 98 下 100% > 
图 20-12 程序 运行 结果 


20.3.2 ”键盘 相关 事件 


键盘 事件 是 指 键盘 状态 的 改变 ， 常 用 的 键盘 事件 有 onkeydown 按键 事件 、onkeypress 按 下 键 事件 和 
onkeyup 放 开 键 事件 。 


1. onkeydown 按键 事件 

onkeydown 按键 事件 在 键盘 的 按键 被 按 下 时 触发 ，onkeydown 按键 事件 用 于 接收 键盘 的 所 有 按键 ( 包 
括 功能 键 ) 被 按 下 时 的 事件 。onkeydown 按键 事件 与 onkeypress 按 下 键 事件 都 在 按键 按 下 时 触发 ， 但 是 两 
者 是 有 区 别 的 。 

例如 ， 在 用 户 输入 信息 的 界面 中 ， 经 常会 有 同时 输入 多 条 信息 〈 存 在 多 个 文本 框 ) 的 情况 出 现 。 为 方 
便 用 户 使 用 ， 通 常情 况 下 ， 当 用 户 按 回 车 键 时 ， 光 标 自动 跳 入 下 一 个 文本 框 ， 在 文本 框 中 使 用 如 下 所 示 代 
码 ， 即 可 实现 回 车 跳 入 下 一 文本 框 的 功能 。 

<input type="text" name="txtInfo" onkeydown=nif(event.keycode=-13) event.keycode-gn> 

【 例 20-7】 “〈 实 例文 件 ，ch20\Chap20.7.html) onkeydown 事件 应 用 实例 。 


<!DocTYPE html> 

<html> 

<head> 

<title>onkeydown 事件 应 用 实例 </title> 
<script> 

function myFunction(){ 
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alert ("你 在 文本 框 内 按 下 一 个 键 "); 
} 
</script> 
</head> 
<body> 
<p> 当 你 在 文本 框 内 按 下 一 个 按键 时 ,弹出 一 个 信息 提示 框 </p> 
<input type="text" onkeydown="myFunction()"> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap20.7.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-13 


所 示 。 
将 鼠标 指针 定位 在 页 面 中 的 文本 框 内 ， 按 下 键盘 上 的 空格 键 ， 将 弹出 一 个 信息 提示 框 ， 如 图 20-14 所 示 。 
人 口 
慎 cAusersqiangw\poc PD ~ © | 熙 -nkeydowr 村 性 实用 -yx 
文件 (F) 韦 坊 (5) 可 看 NV) 。 必 大 严 (A) 工具 (T) 琵 丙 (H) 来 自 网 页 的 注 惫 
当 人 在 文本 相 内 榨 下 一 个 术 刍 时 ， 强 出 一 个 信息 提示 杠 
二 一 全 作 在 文本 查 m 按 下 一 好 
i 
图 20-13 程序 运行 结果 图 20-14 ”信息 提示 框 


2. onkeypress 按 下 键 事件 


onkeypress 事 件 在 键盘 的 按键 被 按 下 时 触发 -onkeypress 按 下 键 事 件 与 onkeydown 事 件 两 者 有 先后 顺序 ， 
onkeypress 按 下 键 事件 是 在 onkeydown 事件 之 后 发 生 的 。 此 外 ， 当 按 下 键盘 上 的 任何 一 个 键 时 ， 都 会 触发 
onkeydown 事件 ; 但 是 onkeypress 按 下 键 事件 只 在 按 下 键盘 的 任 一 字符 键 (如 A~Z、 数 字 键 ) 时 触发 , 但 


单独 按 下 功能 键 (F1~F12)、Ctl 键 、Shift 键 、Alt 键 等 ， 不 会 触发 onkeypress 按 下 键 事 件 。 
【 例 20-8】〗 (实例 文件 ，ch20\Chap20.8.html) onkeypress 按 下 键 事件 应 用 实例 。 


<!DocTYPE html> 
<html> 
<head> 
<title>onkeypress 事件 应 用 实例 </title> 
<script> 
function myFunction(){ 
alert ("你 在 文本 框 内 按 下 一 个 键 ") 7 
» 
</script> 
</head> 


<body> 

<p> 当 你 在 文本 框 内 按 下 一 个 按键 时 ,弹出 一 个 信息 提示 框 </p> 
<input type="text" onkeypress="myFunction()"> 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap20.8.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-15 


所 示 。 
将 鼠标 定位 在 页 面 中 的 文本 框 内 , 按 下 键盘 上 的 任意 字符 键 , 这 时 按 下 A 键 , 将 弹出 一 个 信息 
如 图 20-16 所 示 。 如 果 单 独 按 下 功能 键 ， 将 不 会 弹出 信息 提示 框 。 
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提示 框 ， 
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- oO x 
国 CAuseraqiargwpoc ~ C | 局 cnkeydonr 可 村 实用- 
HN RS) EBV) KN IRT) HR) 


当 你 在 文本 框 内 榨 下 一 个 按 链 时 ， 弹 出 一 个 信息 - 


元 框 


二 100%6 


图 20-15 程序 运行 结果 图 20-16 信息 提示 框 


3. onkeyup 放 开 键 事 件 


onkeyup 放 开 键 事 件 中 键盘 的 按键 被 按 下 然后 放 开 时 触发 。 例 如 ,页面 中 要 求 用 户 输入 数字 信息 时 , 使 
用 onkeyup 放 开 键 事件 ， 对 用 户 输入 的 信息 进行 判断 ， 具 体 代码 如 下 : 


<input type="text" name="txtNum" onkeyup="if (isNaN (value))execCcommand ('undo');">。 


【 例 20-9】 (实例 文件 ，ch20\Chap20.9.html) onkeyup 放 开 键 事件 应 用 实例 。 


<!DocTYPE html> 

<html> 

<head> 

<title>onkeyup 事件 应 用 实例 </title> 

<script> 

function myFunction(){ 
var x=document .getElementById ("fname"); 
x.value=x.value.toUppercase (); 

} 

</script> 

</head> 

<body> 

<p> 当 用 户 在 输入 字段 释放 一 个 按键 时 触发 函数 ,该 函数 将 字符 转换 为 大 写 。</P> 

请 输入 你 的 英文 名 字 : <input type="text" id="fname" onkeyup="myFunction()"> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap20.9.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-17 
所 示 。 

将 鼠标 指针 定位 在 页 面 中 的 文本 框 内 ， 输 入 英文 名 字 ， 这 里 输入 tom， 然 后 按 下 空格 键 ， 即 可 将 小 写 
英文 名 字 修 改 为 大 写 ， 结 果 如 图 20-18 所 示 。 


CE FT Pre 国人 | < [DCT i Ey 
文件 从 策 沪 (E) 去 香 IV| 。 收 茂 闪 (工具 IT) 各 (H) 文史 有 物 才 FE] 可 二 NV) 执 名 =< 和 工具 [T) 帮助 (H) 
当 用 户 在 输入 字段 释放 一 个 按键 时 诗 发 函 教 ， 该 函数 将 字符 转换 为 大 写 。 当 用 户 在 输入 字段 大 放 一 个 技 键 B 笛 发 函数 ， 该 函数 将 李 将 转换 为 大 写 。 
请 输入 你 的 美文 名 字 : | 请 输入 你 的 英文 名 字 : FW 对 
和 100% 一 100% ~ 
图 20-17 程序 运行 结果 图 20-18 小 写 英文 名 字 修 改 为 大 写 


为 了 让 读者 更 好 地 使 用 键盘 事件 对 网 页 的 操作 进行 控制 ， 下 面 给 出 一 个 综合 实例 ， 即 限制 网 页 文本 框 
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的 输入 。 
【 例 20-10】〔 实 例文 件 ，ch20\Chap20.10.html》 限 制 文本 框 的 输入 。 
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相关 的 代码 实例 请 参考 Chap20.10.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-19 
所 示 。 

根据 提示 ， 可 以 在 用 户 注册 信息 页 面 输入 注册 信息 ， 并 可 以 在 文本 框 中 使 用 键盘 来 移动 或 删除 注册 信 
息 ， 如 图 20-20 所 示 。 


和 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 
NA 


= 于 六 一 日 Xx 
国 CWserqionguiDocn P - 6 全 RHEE 和 > 安 查 急 本 Curenpom 了 -G| 司 RHOA x 立 你 虱 

| HN Wa] SE CR IRT wt SH FED SEV SesN IRM #0 
EE 

用 户 和 名， [ 二 

真实 糙 名 ， + 

年 瞧 ， 

证 件 呈 得 


Email，[ ] 


MAEN | : 
[证 EEE 
< > < > 
Nom ~ tom ~ 
图 20-19 程序 运行 结果 图 20-20 使 用 键盘 来 移动 或 删除 注册 信息 


二 20 3 。 表单 相关 事件 


表单 事件 实际 上 就 是 对 元 素 获得 或 失去 焦点 的 动作 进行 控制 ， 可 以 利用 表单 事件 来 改变 获得 或 失去 焦 
点 的 元 素 样式 ， 这 里 的 元 素 既 可 以 是 同一 类 型 元 素 ， 也 可 以 是 多 种 不 同 的 类 型 元 素 。 


1. 获得 焦点 与 失去 焦点 事件 


onfocus 获得 焦点 事件 是 当 某 个 元 素 获得 焦点 时 触发 事件 处 理 程序 ，onblur 失去 焦点 事件 是 当前 元 素 失 
去 焦点 时 触发 事件 处 理 程序 , 一 般 情 况 下 , onfocus 事件 与 onblur 事件 结合 使 用 , 例如 可 以 结合 使 用 onfocus 


下 面 给 出 一 个 实例 ， 设 置 文本 框 的 背景 颜色 。 本 实例 是 用 户 在 选择 页 面 的 文本 框 时， 文本 框 的 背景 颜 
色 发 生变 化 ， 如 果 选 择 其 他 文本 框 ， 原 来 选择 的 文本 框 的 颜色 恢复 为 原始 状态 。 
【 例 20-11】 实例 文件 ，ch20\Chap20.11.html) 设置 文本 框 的 背景 颜色 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 设 置 文本 框 的 背景 颜色 </title> 
</head> 
<script language="javascript"> 
function txtfocus (event){ 
var e=window.event; 
var obj=e.srcElement; 
obj.style.background="#F00066"; 
} 
function txtblur (event) { 
var e=window.event; 
Var obj=e.srcElement; 
obj.style.background="FFFFFO™; 
. 
</script> 
<body> 
<table align="center" width="360" height="228" border="0"> 
<tr> 
<td width="188"> 登 录 名 :</td> 
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<td width="226"><form name="forml" method="post" action=""> 
<input type="text" name="textfield" onfocus="txtfocus()" onblur="txtblur()"> 
</form></td> 
</tr> 
<tr> 
<tqd> 密 码 :</td> 
<td><form name="form2" method="post" action=""> 
<input type="text" name="textfield2" onfocus="txtfocus()" onblur="txtblur()"> 
</form></td> 
</tr> 
<tr> 
<td> 姓 名 :</td> 
<td><form name="form3" method="post" action=""> 
<input type="text" name="textfield3" onfocus="txtfocus()" onblur="txtblur()"> 
</form></td> 
</tr> 
<tr> 
<td> 性 别 :</td> 
<td><form name="form4" method="post" action=""> 
<input type="text" name="textfield5" onfocus="txtfocus () ”onblur="txtblur () "> 
</form></td> 
</tr> 
<tr> 
<td> 联 系 方式 ; </td> 
<td><form name="form5" method="post" action=""> 
<input type="text" name="textfield4" onfocus="txtfocus()" onblur="txtblur()"> 
</form></td> 
</tr> 
</table> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap20.11.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-21 
所 示 。 

选择 文本 框 输入 内 容 时 ， 即 可 发 现 文本 框 的 背景 色 发 生 了 变化 ， 本 实例 主要 是 通过 获得 焦点 事件 
(onfocus) 和 失去 焦点 事件 (onblur) 来 完成 。 其 中 , onfocus 事件 是 当 某 个 元 素 获得 焦点 时 发 生 的 事件 , onblur 
是 当前 元 素 失去 焦点 时 发 生 的 事件 ， 如 图 20-22 所 示 。 


"| FEYCE 3 DEEPRTEOEE TS 和 
XA) WE EV A) IRM WH En 

登录 名 : 台 登录 名 : 在 下 - 方 季 

密码 | DD: = 

姓名 记 | 姓名 

性 别 [一 性 别 : 

联系 方式 ， -| 联系 方式 ， Y| 

toox ~ Atook ~ 
图 20-21 程序 运行 结果 图 20-22 文本 框 的 背景 色 发 生 了 变化 


2. 失去 焦点 修改 事件 
onchange 失去 焦点 修改 事件 只 在 事件 对 象 的 值 发 生 改 变 并 且 事 件 对 象 失去 焦点 时 触发 。 该 事件 一 般 应 
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用 在 下 拉 文 本 框 中 。 


【 例 20-12】 实例 文件 ，ch20\Chap20.12.html) 使 用 下 拉 列 表 框 改变 字体 颜色 。 


<!DocTYPE HTML> 
<html> 
<head> 
<title> 用 下 拉 列 表 框 改变 字体 颜色 </title> 
</head> 
<body> 
<form name="forml" method="post" action=""> 
<input name="textfield" type="text"” value=" 请 选择 字体 颜色 "> 
<select name="menul" onChange="Fcolor()"> 
<option value="black"> 黑 </option> 
<option value="yellow"> 黄 </option> 
<option value="blue"> 蓝 </option> 
<option value="green"> 绿 </option> 
<option value="red"> 红 </option> 
<option value="purple"> 紫 </option> 
</select> 
</form> 
<script language="javascript"> 
function Fcolor() 
{ 
var e=window.event; 
var obj=e.srcElement; 
forml .textfield.style.color=obj.options[obj.selectedIndex] .value; 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap20.12.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-23 


所 示 。 


单 击 颜色 “ 黑 ” 右 侧 的 下 拉 按 钮 ， 在 弹出 的 下 拉 列表 中 选择 文本 的 颜色 ， 如 图 20-24 所 示 。 
- 0O x - ODO x 
装 CWseraqianguDoe D ~ 0 | | 辣 月 T 拉 5 这 司 CNWeersqianowpcec D -6 | 司 用 下 SF 性 办 | 
文人 (病名 ) 二 看 VM 收音 夫 内 工具。 香 a(H) 文件 兰 ( 昌 下 看 沙 让 夫 内 。 工 只 帮助 H) 
清寺 衬 字 体 闫 名 区 可 | [Ea 目 


100% ~ 我 100% ~ 


图 20-23 程序 运行 结果 图 20-24 选择 文本 的 颜色 


3. 表单 提交 与 重 置 事件 
onsubmit 事件 在 表单 提交 时 触发 ， 该 事件 可 以 用 来 验证 表单 输入 项 的 正确 性 ，onreset 事件 在 表单 被 重 


置 后 触发 ， 一 般 用 于 清空 表单 中 的 文本 框 。 


【 例 20-13】”〔 实 例文 件 ，ch20\Chap20.13.html》 表 单 提交 的 验证 。 


<!DOCTYPE HTML> 
<html> 
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相关 的 代码 实例 请 参考 Chap20.13.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-25 


所 示 。 


在 “商品 名 称 ” 文 本 框 中 输入 名 称 ， 然 后 单 击 “提交 ”按钮 ， 将 会 弹出 一 个 信息 提示 框 ， 提 示 用 户 提 
交 的 信息 不 允许 为 空 ， 结 果 如 图 20-26 所 示 。 
OO Ee 


| Sm Sa 25M Eu 工 Sm WH 


DO eves | aed «| mae 
| HI WR BV KA IaM Wm 


所 罗列 :| 到 槛 家 于 v] [再 开 闪 v] Er 
商品 名 种 ;| ] 

Ea El 
El ] | 
| 司 人 

~ 
靖 品 类 生 | i 
i EE 
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如 果 信 息 输 入 有 误 ， 单 击 “ 重 置 ”按钮 ， 将 弹出 一 个 信息 提示 框 ， 提 示 用 户 是 否 进行 重 置 ， 结 果 如 图 
20-27 所 示 。 


所 民 到 | 不 训 [本 革 面 了] 


Par | | *eRreoe 六 
S| 
得 代 [两 © 有 下 要 团 ? 


En Bs 


low ~ 


图 20-27 重 置 信息 提示 框 


20.3.4 文本 编辑 事件 


回 
文本 编辑 事件 是 在 浏览 器 中 的 内 容 被 修改 时 所 执行 的 相关 事件 ， 主 要 包括 对 浏览 器 中 被 选择 的 内 容 进 
行 复制 、 剪 切 、 粘 贴 时 的 触发 事件 。 


1. 复制 事件 


复制 事件 是 在 浏览 器 中 复制 被 选中 的 部 分 或 全 部 内 容 时 触发 事件 处 理 程序 ，oncopy 事件 在 用 户 复制 元 
素 上 的 内 容 时 触发 。 
【 例 20-14】 实例 文件 ，ch20\Chap20.14.html) 复制 事件 的 应 用 实例 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>oncopy 事件 应 用 实例 </title> 

</head> 

<body> 

<p oncopy="myFunction()">oncopy 复制 事件 的 应 用 </p> 

<script> 

function myFunction() { 
alert ("你 复制 了 文本 ! "); 

} 

</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap20.14.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-28 
所 示 。 

选中 网 页 中 的 文本 进行 复制 ， 即 可 弹出 一 个 信息 提示 框 ， 提 示 用 户 复制 了 文本 内 容 ， 如 图 20-29 所 示 。 

2. 剪 切 事件 

剪 切 事件 是 在 浏览 器 中 剪 切 被 选中 的 内 容 时 触发 事件 处 理 程序 ，oncut 事件 在 用 户 剪 切 元 素 的 内 容 时 触发 。 
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= 简化 
知 QUsers\qjangu\Dcc 凡 * | 感 oncopy 部 件 让 月 示 吧 
文件 ( 明 ” 妨 在昌 ”二 理 WV) 收 茂 去 (工具 (帮助 H) 


oncop7 复 制 事件 的 应 用 


100% > 


20-28 ”程序 运行 结果 


20-29 信息 提示 框 


【 例 20-15】 〈 实 例文 件 ，ch20\Chap20.15.html) 剪 切 事件 的 应 用 实例 。 


<!DocTYPE html> 

<html> 

<head> 

<title>oncut 事件 应 用 实例 </title> 
</head> 

<body> 


<p contenteditable="true"” oncut="myFunction()">oncut 前 切 事件 的 应 用 </p> 


<script> 

function myFunction() { 
alert ("你 前 切 了 文本 !") ; 

} 

</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap20.15.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-30 


所 示 。 


选中 网 页 中 的 文本 进行 剪 切 ， 即 可 弹出 一 个 信息 提示 框 ， 提 示 用 户 剪 切 了 文本 内 容 ， 如 图 20-31 所 示 。 


- Oo x 
@ 自 ] CAUsers\qiangu\Dec 站 ”CC | 让 oncut 要 件 应 放 示 便 
文人 加油 B， 下 着 M) 履 天 (A) 工具 TT 于 区 (H) 


口 
@ 半 CAUsersvqiangwDoc 人 ”0 | 项 oncut 事 从 应 用 于 例 
中 六 纺 ( 查看 VY】 履 划 去 [| 工 晴 [0 帮助 [H 


oneut 藤 切 事件 的 应 用 


去 100% ~ 


图 20-30 程序 运行 结果 


3. 粘贴 事件 
onpaste 事件 在 用 户 向 元 素 中 粘贴 文本 时 触发 。 


oncut 权 切 事件 的 应 用 


图 20-31 信息 提示 框 


【 例 20-16】》 实例 文件 ，ch20\Chap20.16.html》 粘 贴 事 件 的 应 用 实例 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>onpaste 事件 应 用 实例 </title> 
</head> 
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<body> 
<input type="text"” onpaste="myFunction()"” value=" 尝 试 在 此 处 粘贴 文本 " size="40"> 
<p id="demo"></p> 
<script> 
function myFunction() { 
document .getElementById ("demo") .innerHTML = "你 粘贴 了 文本 !"; 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap20.16.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-32 
所 示 。 

将 光标 定位 在 网 页 中 的 文本 框 ， 然 后 粘贴 文本 内 容 到 文本 框 中 ， 这 时 会 在 文本 框 的 下 方 显示 你 粘贴 了 
文本 信息 ， 如 图 20-33 所 示 。 


oo x = 口 x 


加 GAUsersqiamanpoc 人 D0 大 onpaste 要 从 记 用 示例 @ 国 CNueeraqieewpec 记 -| 请 onpeste 事 他 用 未 全 
又 件 了 。 病 晶 下 看 MI， 收 区 工具 (1 帮 开 ( 省 和 
ET 了 二 和 ” 
你 粘贴 了 文本 ! 
100% ~ 
图 20-32 程序 运行 结果 图 20-33 粘贴 了 文本 信息 


4. 选择 事件 


onselect 事件 是 当 文 本 内 容 被 选择 时 触发 事件 处 理 程序 ， 当 使 用 本 事件 时 ， 只 能 在 相应 的 文本 中 选择 一 
个 字符 或 是 一 个 汉字 后 触发 本 事件 ， 并 不 是 用 鼠标 选择 文本 后 ， 松 开 鼠 标 时 触发 。 
【 例 20-17】“〈 实 例文 件 : ch20\Chap20.17.html) 显示 选择 的 文本 。 


<!DocTYPE html> 

<html> 

<head> 

<title> 显 示 选 择 的 文本 </title> 

<script> 

function myFunction(){ 
alert ("你 选中 了 一 些 文本 "); 

1; 

</script> 

</head> 

<body> 

一 些 文本 : <input type="text" value="Hello JavaScript!" onselect="myFunction()"> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap20.17.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-34 
所 示 。 

在 网 页 文本 框 中 选择 需要 的 文本 ， 这 时 会 弹出 一 个 信息 提示 框 ， 提 示 用 户 选中 了 一 些 文本 内 容 ， 如 图 
20-35 所 示 。 
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图 20-34 ”程序 运行 结果 


0.3.5 ”页 面相 关 事 件 


页 面 事件 是 在 页 面 加 载 或 改变 浏览 器 大 小 、 位 置 ， 以 及 对 页 面 中 的 滚动 条 进行 操作 时 ， 所 触发 的 事件 
处 理 程序 。 

1. 页 面 加 载 事件 

onload 事件 会 在 页 面 或 图 像 加 载 完 成 后 触发 相应 的 事件 处 理 程序 ， 具 体 来 讲 ， 使 用 onload 事件 可 以 在 
页 面 加 载 完成 后 对 网 页 中 的 表格 样式 、 字 体 、 背 景 颜 色 等 进行 设置 。 

【 例 20-18】 (实例 文件 ，ch20\Chap20.18.html) 页 面 加 载 时 缩小 图 片 。 
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相关 的 代码 实例 请 参考 Chap20.18.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-36 
所 示 ， 图 片 以 缩小 方式 显示 。 
移动 鼠标 指针 到 图 片上 ， 图 片 以 原始 大 小 显示 ， 如 图 20-37 所 示 。 


6 


ei omert TPR 


24 RBH BEM tae) IRM wo 


EL 


图 20-36 程序 运行 结果 


2. 页 面 大 小 事件 


onresize 事件 是 页 面 大 小 事件 , 该 事件 是 用 户 改变 浏 


览 器 的 窗口 大 小 。 
【 例 20-19】” 实 例文 件 ，ch20\Chap20.19.html》 固 定 浏览 器 窗口 大 小 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<title> 固 定 浏览 器 的 大 小 </title> 

</head> 

<body> 

<center><img src="01.jpg" width="544" height="327"></center> 

<script language="Javascript"> 

function fastness(){ 
window.resizeTo (600, 450); 


} 


document .body.onresize=fastness; 
document .body.onload=fastness; 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap20.19.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-38 
所 示 ， 浏 览 器 窗口 以 固定 大 
3. 页 面 关闭 事件 

onbeforeunload 事件 在 即将 离开 当前 页 面 〈 刷 新 或 关闭 ) 时 触发 。 该 事件 可 用 于 弹出 对 话 框 ,提示 用 


户 是 继续 浏览 页 面 还 是 离开 
类 似 “ 确 定 要 离开 此 页 吗 ? 


对 话 框 中 。 


小 方式 显示 。 


图 20-37 图 片 以 原始 大 小 显示 


览 器 的 大 小 时 触发 事件 处 理 程序 ,主要 用 于 固定 浏 


fF 当前 页 面 。 对 话 框 默 认 的 提示 信息 根据 不 同 的 浏览 器 有 所 不 同 ， 标 准 的 信息 


”该 信息 不 能 删除 , 但 用 户 可 以 自 定义 一 些 消 息 


提示 与 标准 信息 一 起 显示 在 
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图 20-38 程序 运行 结果 
【 例 20-20】 《实例 文件 ，ch20\Chap20.20.html》 关 闭 页 面 弹 出 提示 框 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 关 闭 页 面 弹出 提示 框 </title> 
</head> 
<body onbeforeunload="return myFunction()"> 
<p> 关 闭 当 前 窗口 ,触发 onbeforeunload 事件 。</p> 
<script> 
function myFunction() { 
return "我 在 这 写 点 东西 ..."; 
} 
</script> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap20.20.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-39 


所 示 。 
关闭 当前 窗口 ， 弹 出 一 个 信息 提示 框 ， 如 图 20-40 所 示 。 
= 而 本 


国 cNuseragiengwpoc P - d | 大 和 NTN 未 全 
文 伯 介 。 编 壹 日 查看 MI 权 基 天 A】 工 只 (入 且 HH) 


关闭 当前 窗口 ， 触 发 cnbsfcreunlcad 事件 。 


乱 100% ~ 


图 20-39 ”程序 运行 结果 


20.3.6” 拖 动 相 关 事 件 


Windows Internet Explorer 
【i 确实 要 高 开 此 页 吗 ? 
来 各 网 页 的 消息 


我 在 这 写 点 东西 . 


一 高 开 此 页 (U 


一 留 在 此 页 (9) 


图 20-40 ”信息 提示 框 


JavaScript 为 用 户 提供 的 拖 放 事件 有 两 类 ， 一 类 是 拖 放 对 象 事件 ， 另 一 类 是 放置 目标 事件 。 


1. 拖 放 对 象 事件 


拖 放 对 象 事件 包括 ondragstart 事件 、ondrag 事件 、ondragend 事件 。 
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ondragstart 事件 ， 用 户 开始 拖 动 元 素 时 触发 。 

ondrag 事件 : 元素 正在 拖 动 时 触发 。 

ondragend 事件 ， 用 户 完成 元 素 拖 动 后 触发 。 

注意 : 在 对 对 象 进行 拖 动 时 ， 一 般 要 使 用 ondragend 事件 ， 用 来 结束 对 象 的 拖 动 操作 。 


2. 放置 目标 事件 

放置 目标 事件 包括 ondragenter 事件 、ondragover 事件 、ondragleave 事件 和 ondrop 事件 。 
ondragenter 事件 : 当 被 鼠标 指针 拖 动 的 对 象 进入 其 容器 范围 内 时 触发 此 事件 。 
ondragover 事件 ， 当 某 被 拖 动 的 对 象 在 另 一 对 象 容器 范围 内 拖 动 时 触发 此 事件 。 
ondragleave 事件 ， 当 被 鼠标 指针 拖 动 的 对 象 离开 其 容器 范围 时 触发 此 事件 。 

ondrop 事件 :在 一 个 拖 动 过 程 中 ， 释 放 鼠 标 键 时 触发 此 事件 。 

注意 : 在 拖 动 元 素 时 ， 每 隔 350 毫秒 会 触发 ondrag 事件 。 

【 例 20-21】 (实例 文件 ，ch20\Chap20.21.html) 来 回 拖 动 文本 。 


<!DocTYPE HTML> 
<html> 
<head> 
<title> 来 回 拖 动 文本 </title> 
<style> 
.droptarget { 
float: left; 
width: 100px; 
height: 35px; 
margin: 15px; 
padding: 10px; 
border: lpx solid #aaaaaa; 
» 
</style> 
</head> 
<body> 
<p> 在 两 个 矩形 框 中 来 回 拖 动 文本 :</P> 
<div class="droptarget"> 
<p draggable="true"” id="dragtarget"> 拖 动 我 !</p> 
</div> 
<div class="droptarget"></div> 
<p style="clear:both;"> 
<p id="demo"></p> 
<script> 
/+* 拖 动 时 触发 */ 
document .addEventListener ("dragstart", function(event) { 
//dataTransfer.setData() 方 法 设置 数据 类 型 和 拖 动 的 数据 
event .dataTransfer.setData ("Text", event.target.id); 
// 拖 动 p 元 素 时 输出 一 些 文本 
document .getElementById ("demo") -innerHTML = "开始 拖 动 文本 "; 
// 修 改 拖 动 元 素 的 透明 度 
event.target.style.opacity = "0.4"; 
Ds 
// 在 拖 动 P 元 素 的 同时 ,改变 输出 文本 的 颜色 
document .addEventListener ("drag", function(event) { 
document .getElementById ("demo") .style.color = "red"; 
Ds 


可 
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相关 的 代码 实例 请 参考 Chap20.21.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-41 
所 示 。 


在 两 个 矩形 框 中 来 回 拖 动 文本 : 


拖 动 我 ! 


图 20-41 程序 运行 结果 
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选中 第 一 个 矩形 框 中 的 文本 ， 按 下 鼠标 左 键 不 放 进行 拖 动 ， 这 时 会 在 页 面 中 显示 “开始 拖 动 文本 ”的 


信息 提示 ， 结 果 如 图 20-42 所 示 。 
拖 动 完成 后 ， 松 开 鼠 标 左 键 ， 页 面 中 提示 信息 为 “完成 文本 的 拖 动 ” 如 图 20-43 所 示 


-oO x -0 * 
国 CWserswiergu\Dor D - | 局 eX 国 Cwx Do 用 - 6 “局 未 三 3 六 本 
HM ME EM IN IRT 5 ZHM REE EV) tm IAM a0 
在 丙 个 拭 形 柱 中 来 由 指 动 文本 : 在 两 个 拒 形 杠 中 让 加 拖 动 文本 
巧 拖 二 我 : 
开始 杜 动 文本 充 成 文本 的 抑 动 
和 oow ~ Rio ~ 

图 20-42 显示 “开始 拖 动 文本 ”的 信息 提示 图 20-43 ”提示 信息 为 “完成 文本 的 拖 动 ” 


20.3.7 多 媒体 相关 事件 
JavaScript 多 媒体 事件 主要 是 在 视频 /音频 (audio/video) 播放 的 过 程 中 触发 事件 程序 ， 


表 20-2 JavaScript 的 多 媒体 (Media) 事件 


如 在 视频 /音频 
(audio/video) 终止 加 载 时 触发 、 在 开始 播放 时 触发 等 ，JavaScript 的 多 媒体 事件 如 表 20-2 所 示 。 


事 件 说 明 
onabort 事件 在 视频 /音频 (audio/video) 终止 加 载 时 触发 
oncanplay 事件 在 用 户 可 以 开始 播放 视频 /音频 (audio/video) 时 触发 
oncanplaythrough 事件 在 视频 /音频 (audio/video) 可 以 正常 播放 上 且 无 须 停顿 和 缓冲 时 触发 
ondurationchange 事件 在 视频 /音频 (audio/video) 的 时 长 发 生变 化 时 触发 
onemptied 当期 播放 列表 为 空 时 触发 
onended 事件 在 视频 /音频 (audio/video) 播放 结束 时 触发 
onerror 事件 在 视频 /音频 (audio/video) 数据 加 载 期 间 发 生 错误 时 触发 
onloadeddata 事件 在 浏览 器 加 载 视频 /音频 (audio/video) 当前 帧 时 触发 
onloadedmetadata 事件 在 指定 视频 /音频 (audiofvideo) 的 元 数据 加 载 后 触发 
‘onloadstart 事件 在 浏览 器 开始 寻找 指定 视频 /音频 (audio/video) 时 触发 
onpause 事件 在 视频 /音频 (audio/video) 暂停 时 触发 
onplay 事件 在 视频 /音频 (audio/video) 开始 播放 时 触发 
onplaying 事件 在 视频 /音频 (audio/video) 暂停 或 者 在 缓冲 后 准备 重新 开始 播放 时 触发 
onprogress 事件 在 浏览 器 下 载 指定 的 视频 /音频 (audio/video) 时 触发 
onratechange 事件 在 视频 /音频 (audio/video) 的 播放 速度 发 送 改变 时 触发 
onseeked 事件 在 用 户 重新 定位 视频 /音频 (audiofvideo) 的 播放 位 置 后 触发 
onseeking 事件 在 用 户 开始 重新 定位 视频 /音频 (audio/video) 时 触发 
onstalled 事件 在 浏览 器 获取 媒体 数据 ， 但 媒体 数据 不 可 用 时 触发 
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续 表 
事 件 说 明 
onsuspend 事件 在 浏览 器 读 取 媒 体 数据 中 止 时 触发 
ontimeupdate 事件 在 当前 的 播放 位 置 发 送 改 变 时 触发 
onvolumechange 事件 在 音量 发 生 改变 时 触发 


onwaiting 事件 在 视频 由 于 要 播放 下 一 帧 而 需要 缓冲 时 触发 


20.4 JavaScript 处 理事 件 的 方式 


JavaScript 处 理事 件 的 常用 方式 包括 通过 匿名 函数 方式 、 通 过 显 式 声明 方式 、 通 过 手工 触发 方法 等 ， 下 
面 分 别 进行 详细 介绍 。 


20.4.1 通过 匿名 函数 处 理 


匿名 函数 的 方式 是 通过 Function 对 象 构造 匿名 函数 ， 并 将 其 方法 复制 给 事件 ， 此 时 匿名 函数 就 成 为 该 
事件 的 事件 处 理 器 。 
【 例 20-22】 (实例 文件 ，ch20\Chap20.22.html) 通过 匿名 函数 处 理 实例 。 


<!DocTYPE HTML> 
<html> 
<head> 
<title> 通 过 匿名 函数 处 理事 件 </title> 
</head> 
<body> 
<center> 
<br> 
<p> 通 过 匿名 函数 处 理事 件 </p> 
<form name=MyForm id=MyForm> 
<input type=button name=MYButton id=MyButton value=" 测 试 "> 
</form> 
<script language="JavaScript" type="text/javascript"> 
document .MyForm.MyButton.onclick=new Function() 
{ 
alert ("已 经 单 击 该 按钮 1") 7 
} 
</script> 
</center> 
</body> 
</html> 


在 上 面 的 代码 中 包含 一 个 匿名 函数 ， 其 具体 内 容 如 下 : 
document .MyForm.MyButton.onclick=new Function() 
{ 
alert ("已 经 单 击 该 按钮 1") 7 
下 
相关 的 代码 实例 请 参考 Chap20.22.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-44 


所 示 。 
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图 20-44 ”程序 运行 结果 


上 述 代码 的 作用 是 将 名 为 MyButton 的 button 元 素 的 click 动作 的 事件 处 理 器 设置 为 新 生成 的 Function 
对 象 的 匿名 实例 ， 即 匿名 函数 。 


20.4.2 ”通过 显 式 声明 处 理 


在 设置 时 间 处 理 器 时 ， 也 可 以 不 使 用 匿名 函数 ， 而 将 该 事件 的 处 理 器 设置 为 已 经 存在 的 函数 。 例 如 ， 
当 鼠 标 指针 移出 图 片区 域 时 ， 可 以 实现 图 片 的 转换 ， 从 而 扩展 为 多 幅 图 片 定 式 轮番 播放 的 广告 模式 ， 首 先 
在 <head> 和 </head> 标 签 对 之 间 嵌 套 JavaScript 脚本 定义 两 个 函数 : 


function MYImageR() 
{ 

document .all.MyPic.src="fengjingl.jpg"; 
} 
function MYImageB () 
{ 

document .all.MyPic.src="fengjing2.jpg"; 
} 


再 通过 JavaScript 脚本 代码 将 <img> 标 记 元 素 的 mouseover 事件 的 处 理 器 设置 为 已 定义 的 函数 
MyImageA0，mouseonut 事件 的 处 理 器 设置 为 已 定义 的 函数 MyImageB(): 


document .all.MyPic.onmouseover=MyImageA; 
document .all.MyPic.onmouseout=MyImageB; 


【 例 20-23】 实例 文件 ，ch20\Chap20.23.html》 通 过 使 用 鼠标 变换 图 片 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 通 过 使 用 鼠标 变换 图 片 </title> 
<script language="Javascript" type="text/javascript"> 
function MyImageA() 
时 

document .all .MyPic.src="01.jpg"; 
} 
function MYImageB () 
{ 

document .all.MyPic.src="02.jpg"; 
} 
</script> 
</head> 
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<body> 
<center> 

<p> 在 图 片 内 外 移动 鼠标 指针 ,图 片 轮换 </p> 

<img name="MyPic" id="MyPic" src="01.jpg" width=300 height=200></img> 
<script language="JavaSscript" type="text/javascript"> 

document .all.MyPic.onmouseover=MyImageA; 

document .all.MyPic.onmouseout=MyImageB; 

</script> 

</center> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap20.23.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-45 
所 示 。 
当 鼠 标 指针 移动 在 图 片区 域 时 ， 图 片 就 会 发 生变 化 ， 如 图 20-46 所 示 。 


EE 9 x 
目 cwueeraqianoupec D+ © | 全 本 amaFasr 圈 二 aeweoeroecup.cleaawnmammamr ， 
XA WE EHV) EN TET RIO EA 


在 图 片 内 外 移动 候 标 ,图 片 轮换 在 图 片 内 外 乏 动 息 标 ， 图 片 轮换 


图 20-45 程序 运行 结果 图 20-46 通过 使 用 鼠标 变换 图 片 


提示 : 不 难看 出 ， 通 过 显 式 声明 的 方式 定义 事件 的 处 理 器 则 代码 紧凑 、 可 读 性 强 ， 其 对 显 式 声明 的 函 
数 没有 任何 限制 ， 还 可 以 将 该 函数 作为 其 他 事件 的 处 理 器 。 


20.4.3 ”通过 手工 触发 处 理 


手工 触发 处 理事 件 的 元 素 很 简单 ， 即 通过 其 他 元 素 的 方法 来 触发 一 个 事件 而 不 需要 通过 用 户 的 动作 来 
触发 该 事件 。 如 果 某 个 对 象 的 事件 有 其 默认 的 处 理 器 ， 此 时 再 设置 该 事件 的 处 理 器 时 ， 就 将 可 能 出 现 意外 
的 情况 。 

【 例 20-24】 实例 文件 ，ch20\Chap20.24.html) 使 用 手工 触发 方式 处 理事 件 。 


<! DocTYPE HTML > 

<html> 

<head> 

<title> 使 用 手工 触发 的 方式 处 理事 件 </title> 

<script language="JavaScript" type="text/javascript"> 
function MYyTest () 

{ 

var msg=" 通 过 不 同 的 方式 返回 不 同 的 结果 : \n\n"; 

msg+=" 单 击 "测试 "按钮 , 即 可 直接 提交 表单 \n"; 
msg+=" 单 击 "确定 "按钮 , 即 可 触发 onsubmit () 方法 ,然后 才 提 交 表 单 \n"; 


alert (msg); 


} 
</script> 
</head> 
<body> 
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<br> 
人 id=MyForml onsubmit ="MyTest ()" method=post action="haapyt.asp"> 
<input type=button value=" 测 试 ” onclick="document.all.MyForml.submit();"> 
<input type=submit value=" 确 定 "> 
</center> 
</body> 
</html> 
相关 的 代码 实例 请 参考 Chap20.24.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-47 
所 示 。 
单 击 “ 测 试 ” 按 钮 ， 即 可 触发 表单 的 提交 事件 ， 并 且 直 接 将 表单 提交 给 目标 页 面 haapyt.asp; 如 果 单 击 
默认 触发 提交 事件 的 “确定 ”按钮 ， 则 弹出 的 信息 框 如 图 20-48 所 示 。 


= 口 x 
站 cNUeerevqiangu\poc ~ 地 | 车 全 H 手 工 修 入 加 方式 .x 
文人 (入 得 E)， 查理 V) 收 基 夫 (A) 工具 (7) 帮 芭 (H) 二 三 网 页 的 消息 x 
[ MK [ 3 通过 不 同 的 方式 返回 不 同 的 纺 果 : 
单 去 【 筒 试 】 按 钮 .对 可 直接 提 六 表单 
单 去 【确定 】 控 型 ,到 可 骏 发 cnsubmit[ 方 法 然后 本 提交 表单 
起 1005 ~ 
图 20-47 ”程序 运行 结果 图 20-48 ”提示 信息 框 


此 时 单 击 “ 确 定 ”按钮 ， 即 可 将 表单 提交 给 目标 页 面 haapytasp， 所 以 当 事 件 在 事实 上 已 包含 导致 事件 
发 生 的 方法 时 ， 该 方法 不 会 调用 有 问题 的 事件 处 理 器 ， 而 会 导致 与 该 方法 对 应 的 行为 发 生 。 


20.5 事件 对 象 Event 


JavaScript 的 Event 对 象 用 来 描述 JavaScript 的 事件 ，Event 代表 事件 状态 ， 如 事件 发 生 的 元 素 、 键 盘 状 
态 、 鼠 标 位 置 和 鼠标 按钮 状态 。 一 旦 事件 发 生 ， 便 会 生成 Event 对 象 ， 如 单 击 一 个 按钮 ， 浏 览 器 的 内 存 中 
就 产生 相应 的 Event 对 象 。 


20.5.1 在 IE 中 引用 Event 对 象 
在 下 4 以 上 版 本 中 ，Event 对 象 作为 window 属性 访问 ， 具 体格 式 如 下 : 


window.event 
其 中 ， 引 用 的 window 部 分 是 可 选 的 ， 因 此 脚本 就 像 全 局 引用 一 样 来 对 待 Event 对 象 ， 具 体格 式 如 下 : 


event .propertyName 


20.5.2 ”事件 对 象 Event 的 属性 


Event 是 JavaScript 中 的 重要 事件 ，Event 代表 事件 的 状态 ， 专 门 负责 对 事件 的 处 理 ， 其 属性 能 帮助 用 
户 完成 很 多 和 用 户 交互 的 操作 ， 下 面 介 绍 Event 对 象 的 主要 属性 ， 如 表 20-3 所 示 。 
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表 20-3 ” JavaScript 中 Event 事件 对 象 的 主要 属性 
属 性 描 述 
be 返回 当前 Event 对 象 表示 的 事件 的 名 称 
i 该 属性 设置 或 获取 左 Alt 键 的 状态 ， 检 索 左 Alt 键 的 当前 状态 ， 反 回信 为 tue 时 ， 表 示 关闭 ， 反 回信 
为 false 时 ， 表 示 不 关闭 
该 属性 设置 或 获取 左 Cul 键 的 状态 ， 检 索 左 Ct 键 的 当前 状态 ， 返 回信 为 true 时 ， 表 示 关闭 ,返回 值 
SDE 为 false 时 ， 表 示 不 关闭 
该 属性 设置 或 获取 左 Shif 键 的 状态 ， 检 索 左 Shift 键 的 当前 状态 ， 返 回 值 为 true 时 ， 表 示 关 闭 ， 返 回 
el 值 为 false 时 ， 表 示 不 关闭 
srcElement 该 属性 设置 或 获取 触发 事件 的 对 象 
bt 该 属性 设置 或 获取 事件 发 生 时 用 户 所 按 的 鼠标 刍 
该 属性 获取 鼠标 在 浏览 器 窗口 中 的 x 坐标 ， 它 是 一 个 只 读 属性 ， 即 只 能 获取 鼠标 的 当前 位 置 ， 不 能 改 
i 变 鼠 标的 位 置 
该 属性 获取 鼠标 在 浏览 器 窗口 中 的 y 坐标 ， 它 是 一 个 只 读 属性 ， 即 只 能 获取 鼠标 的 当前 位 置 ， 不 能 改 
变 鼠 标的 位 置 
offsetX 发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 x 坐 标 
offsetY 发 生 事件 的 地 点 在 事件 源 元 素 的 坐标 系统 中 的 y 坐标 
altkey 返回 当 事 件 被 触发 时 ，Alt 键 是 否 被 按 下 ， 返 回 的 值 是 一 个 布尔 值 
ctKey 返回 当 事 件 被 触发 时 ，Ctl 键 是 否 被 按 下 ， 返 回 的 值 是 一 个 布尔 
shifiKey 返回 当 事 件 被 触发 时 ，Shif 键 是 否 被 按 下 ， 返 回 的 值 是 一 个 布尔 值 
该 属性 检测 是 否 接受 上 层 元 素 的 事件 的 控制 , 如 果 该 属性 的 值 为 false, 则 多 许 被 上 层 元 素 的 事件 控制 ， 
cancelBubble 。 | 否则 值 为 tue， 则 不 被 上 层 元 素 的 事件 控制 
Bubbles 返回 布尔 值 ， 指 示 事件 是 不 是 起 泡 事件 类 型 
Cancelable 返回 布尔 值 ， 指 示 事件 是 否 可 拥有 取消 的 默认 动作 
cumentTarget 。 | 返回 其 事件 监听 器 触发 该 事件 的 元 素 
ER 返回 事件 传播 的 当前 阶段 
vit 返回 触发 此 事件 的 元 素 (事件 的 目标 节点 ) 
es 返回 事件 生成 的 日 期 和 时 间 
pedion 返回 按键 在 设备 上 的 位 置 
ce 返回 onkeypress 事件 触发 刍 值 的 字母 代码 
i 在 按 下 按键 时 返回 按键 的 标识 符 
yc 返回 onkeypress 事件 触发 的 键 的 值 的 字符 代码 ， 或 者 onkeydown 或 onkeyup 事件 的 键 的 代码 
Which 返回 onkeypress 事件 触发 的 键 的 值 的 字符 代码 ， 或 者 onkeydown 或 onkeyup 事件 的 键 的 代码 
iigey 返回 当 事 件 被 触发 时 ，“meta” 键 是 否 被 按 下 
relatedTarget 。 | 返回 与 事件 的 目标 节点 相关 的 节点 
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针对 事件 对 象 的 属性 ， 下 面 给 出 一 个 具体 实例 ， 即 网 页 中 的 图 片 跟随 鼠标 指针 移动 而 移动 。 
【 例 20-25】 实例 文件 ，ch20\Chap20.25.html》 随 鼠标 指针 移动 的 图 片 。 


相关 的 代码 实例 请 参考 Chap20.25.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-49 
所 示 ， 网 页 中 的 图 片 跟随 鼠标 指针 移动 而 移动 ， 在 上 述 代 码 中 应 用 了 Event 对 象 中 的 clientX 和 clientY 属 
性 获取 鼠标 指针 在 当前 工作 区 中 的 位 置 。 
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20-49 ”程序 运行 结果 


20.5.3 ”事件 对 象 Event 的 方法 


事件 对 象 的 方法 主要 用 于 创建 新 的 事件 对 象 、 初 始 化 新 创建 对 象 属性 等 ， 下 面 介绍 Event 事件 对 象 的 
主要 方法 ， 如 表 20-4 所 示 。 


表 20-4 JavaScript 中 Event 事件 对 象 的 主要 方法 


为 当 描 述 
createEvent| 创建 新 的 事件 对 象 
initEventO 初始 化 新 创建 的 Event 对 象 的 属性 
PreventDefaultO 通知 浏览 器 不 要 执行 与 事件 关联 的 默认 动作 
stopPropagation() 不 再 派发 事件 
addEventListener() 允许 在 目标 事件 中 注册 监听 事件 
dispatchEventO 允许 发 送 事件 到 监听 器 上 
removeEventListener() 运行 一 次 注册 在 事件 目标 上 的 监听 事件 
handleEventO 把 任意 对 象 注册 为 事件 处 理 程序 
initMouseEvent() 初始 化 鼠标 事件 对 象 的 值 
initKeyboardEventO 初始 化 键盘 事件 对 象 的 值 


20.6 事件 模拟 


事件 通常 是 在 用 户 和 浏览 器 进行 交互 时 被 触发 的 , 其 实 不 然 , 通过 JavaScript 可 以 在 任何 时 间 触 发 特定 
的 事件 。 这 就 意味 着 会 有 适当 的 事件 冒 泡 ， 并 且 浏 览 器 会 执行 分 配 的 事件 处 理 程序 。 这 种 能 力 在 测试 Web 
应 用 程序 时 非常 有 用 ， 因 此 ， 在 DOM 3 级 规范 中 提供 了 一 些 方法 来 模拟 特定 的 事件 。 


20.6.1 Dom 事件 模拟 


可 以 通过 Document 上 的 createEvent0 方 法 ， 在 任何 时 候 创 建 事 件 对 象 ， 此 方法 只 接受 一 个 参数 ， 即 要 
创建 事件 对 象 的 事件 字符 串 ， 在 DOM 2 级 规范 上 所 有 的 字符 串 都 是 复数 形式 ， 在 DOM 3 级 事件 上 所 有 的 
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字符 串 都 采用 单数 形式 ， 所 有 的 字符 串 如 下 : 

UIEvents: 通用 的 工事 件 ， 鼠 标 事件 、 键 盘 事件 都 继承 自 UI 事件 ， 在 DOM 3 级 上 使 用 的 是 UIEvent。 

MouseEvents: 通用 的 鼠标 事件 ， 在 DOM 3 级 上 使 用 的 是 MouseEvent。 

MutationEvents: 通用 的 突变 事件 ， 在 DOM 3 级 上 使 用 的 是 MutationEvent。 

HTMLEvents: 通用 的 HIML 事件 ， 在 DOM 3 级 上 还 没有 等 效 的 。 

注意 : IE 9 是 唯一 支持 DOM 3 级 键盘 事件 的 浏览 器 ,但 其 他 浏览 器 也 提供 了 其 他 可 用 的 方法 来 模拟 键 
盘 事 件 。 

一 旦 创建 了 一 个 事件 对 象 ， 就 要 初始 化 这 个 事件 的 相关 信息 ， 每 一 种 类 型 的 事件 都 有 特定 的 方法 来 初 
始 化 ， 在 创建 完事 件 对象 之 后 ， 通 过 dispatchEvent0 方 法 来 将 事件 应 用 到 特定 的 dom 节点 上 ， 以 便 其 支持 
该 事件 。 这 个 dispatchEvent0 事 件 ， 支 持 一 个 参数 ， 就 是 用 户 创建 的 Event 对 象 。 


20.6.2 ”鼠标 事件 模拟 


鼠标 事件 可 以 通过 创建 一 个 鼠标 事件 对 象 来 模拟 (mouse event object)， 并 且 授 予 它 一 些 相 关 信息 ， 创 
建 一 个 鼠标 事件 通过 传 给 createEvent() 方 法 一 个 字符 串 “MouseEvents”， 来 创建 鼠标 事件 对 象 ， 之 后 通过 
iniMouseEvent0 方 法 来 初始 化 返回 的 事件 对 象 ，iniMouseEvent0 方 法 接受 以 下 15 种 参数 ; 

type string 类 型 ， 要 触发 的 事件 类 型 ， 例 如 “click”。 

bubbles Boolean 类 型 ， 表示 事件 是 否 应 该 冒 泡 ， 针 对 鼠标 事件 模拟 ， 该 值 应 该 被 设置 为 true。 

cancelable bool 类 型 : 表示 该 事件 是 否 能 够 被 取消 ， 针 对 鼠标 事件 模拟 ， 该 值 应 该 被 设置 为 tue。 

view 抽象 视图 ， 事件 授予 的 视图 ， 这 个 值 几乎 全 是 document.defaultView。 

detail int 类 型 ， 附 加 的 事件 信息 ， 这 个 初始 化 时 一 般 应 该 默认 为 0。 

screenX int 类 型 :事件 距离 屏幕 左边 的 x 坐标 。 

screenY int 类 型 ， 事件 距离 屏幕 上 边 的 y 坐标 。 

clientX int 类 型 : 事件 距离 可 视 区 域 左边 的 x 坐标 。 

clientY int 类 型 ， 事件 距离 可 视 区 域 上 边 的 y 坐标 。 

ctrIKey Boolean 类 型 ， 代 表 Ctrl 键 是 否 被 按 下 ， 默 认为 false。 

altKey Boolean 类 型 ， 代表 Alt 键 是 否 被 按 下 ， 默 认为 false。 

shiftKey Boolean 类 型 : 代表 Shift 键 是 否 被 按 下 ， 默 认为 false。 

metaKey Boolean 类 型 ， 代 表 meta key 是 否 被 按 下 ， 默 认 是 false。 

button int 类 型 ， 表 示 被 按 下 的 鼠标 键 ， 默 认 是 零 。 

relatedTarget (object) : 事件 的 关联 对 象 ， 只 有 在 模拟 mouseover 和 mouseout 时 用 到 。 

值得 注意 的 是 ，initMouseEvent0 的 参数 直接 与 Event 对 象 相 映射 ， 其 中 前 四 个 参数 是 由 浏览 器 用 到 ， 
只 有 事件 处 理 函 数 用 到 其 他 的 参数 ， 当 事件 对 象 作为 参数 传 给 dispatch() 方 式 ，target 属性 将 会 自动 被 赋值 。 
下 面 是 具体 定义 的 相关 代码 实例 : 


var btn = document.getElementById ("myBtn"); 

var event = document.createEvent ("MouseEvents"); 

event -initMouseEvent ("click", true, true, document .defaultView, 0, 0, 0, 0, 0,false, false, false, 
false, 0, null); 

btn.dispatchEvent (event); 


在 DOM 实现 的 浏览 器 中 ， 所 有 其 他 的 事件 都 包括 dbclick， 都 可 以 通过 相同 的 方式 来 实现 。 


471 


5 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实 跨 ( 超 值 版 ) 


i 20 


.6.3 ”键盘 事件 模拟 
在 DOM 3 级 事件 中 创建 一 个 键盘 事件 对 象 , 该 对 象 是 通过 createEvent0 方 法 , 并 传 入 KeyBoardEvent 


字符 串 作 为 参数 ， 对 返回 的 Event 对 象 ， 调 用 initKeyBoadEvent(0 方 法 初始 化 ， 初 始 化 键盘 事件 的 参数 有 以 
下 由 


type (string): 要 触发 的 事件 类 型 ， 例 如 keydown。 

bubbles (Boolean): 代表 事件 是 否 应 该 冒 泡 。 

cancelable (Boolean): 代表 事件 是 否 可 以 被 取消 。 

View (AbstractView): 被 授予 事件 的 是 图 ， 通 常 值 为 document.defaultView。 

key (string): 按 下 的 键 对 应 的 code。 

location (integeD: 按 下 键 所 在 的 位 置 。0: 默认 键盘 ，1: 左 侧 位 置 ，2: 右 侧 位 置 ，3: 数字 键盘 
虚拟 键盘 区 ，5: 游戏 手柄 。 

modifiers (string): 一 个 由 空格 分 开 的 修饰 符 列表 。 

repeat (integer): 一 行 中 某 个 键 被 按 下 的 次 数 。 

需要 注意 的 是 ， 在 DOM 3 事件 中 ， 废 掉 了 keypress 事件 ， 因 此 按照 下 面 的 方式 ， 用 户 只 能 模拟 键盘 上 


内 
A 


的 keydown 和 keyup 事件 。 
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var textbox = document.getElementById("myTextbox") ,event; 

if (document.implementation.hasFeature ("KeyboardEvents", "3.0")){ 

event = document.createEvent ("KeyboardEvent"); 

event .initKeyboardEvent ("keydown", true, true, document.defaultView, "a",0, "Shift", 0); 
, 

textbox.dispatchEvent (event); 


.6.4 ”模拟 其 他 事件 


鼠标 事件 和 键盘 事件 是 在 浏览 器 中 最 常 被 模拟 的 事件 ， 但 是 某 些 时 候 同样 需要 模拟 突变 事件 和 HTML 


事件 。 这 时 可 以 用 createEvent(MutationEvents) 来 创建 一 个 突变 事件 对 象 , 可 以 采用 initMutationEvent() 来 初 
始 化 这 个 事件 对 象 ， 参 数 包 括 type、bubbles、cancelable 、relatedNode、prevValue、newValue、atttName 和 
attrChange。 


用 户 可 以 采用 下 面 的 方式 来 模拟 一 个 突变 事件 : 


var event = document.createEvent ('MutationEvents'); 
event .initMutationEvent ("DOMNodeInserted", true, false, someNode, "","","",0); 
target .dispatchEvent (event); 


对 于 HTML 事件 ， 直 接 采 用 下 面 的 代码 。 


var event = document.createEvent ("HTMLEvents"); 
event.initEvent ("focus", true, false); 
target .dispatchEvent (event); 


对 于 突变 事件 和 HTML 事件 很 少 在 浏览 器 中 用 到 ， 因 为 它们 受 应 用 程序 的 限制 。 


20.6.5 IE 中 的 事件 模拟 


从 正 8， 以 及 更 早 版 本 的 正 ， 都 在 模仿 DOM 模拟 事件 的 方式 ， 首 先 创建 事件 对 象 ， 然 后 初始 化 事件 


信息 ， 最 后 触发 事件 。 
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不 过 ， 正 在 完成 这 几 个 步骤 的 过 程 是 不 同 的， 首先 不 同 于 DOM 中 创建 Event 对 象 的 方法 ，IE 采用 
document.createEventObject0 方 法 ， 并 且 没 有 参数 ， 返 回 一 个 通用 的 事件 对 象 。 
其 次 ， 要 对 返回 的 Event 对 象 赋值 ， 此 时 正 并 没有 提供 初始 化 函数 ， 用 户 只 能 采用 物理 方法 一 个 一 个 
地 赋值 ， 最 后 在 目标 元 素 上 调用 fireEvent0 方 法 ， 参 数 为 两 个 : 事件 处 理 的 名 称 和 创建 的 事件 对 象 。 当 
fireEvent 方法 被 调用 的 时 候 ，Event 对 象 的 srcElement 和 type 属性 将 会 被 自动 赋值 ， 其 他 将 需要 手动 赋值 。 
具体 代码 如 下 : 


var btn = document .getElementById ("myBtn"); 
Var event = document.createEventObject (); 


event.screenX = 100; 
event.screenY = 07 
event.clientx = 0; 
event.clientY = 0; 


event.ctrlKey = false; 
event.altKey = false; 
event.shiftKey = false; 
event.button = 0; 

btn.fireEvent ("onclick", event); 


上 述 实 例 中 创建 了 一 个 事件 对 象 ， 之 后 通过 一 些 信息 初始 化 该 事件 对 象 ， 注意 事件 属性 的 赋值 是 无 序 
的 ， 对 于 事件 对 象 来 说 这 些 属 性 值 不 是 很 重要 ， 因 为 只 有 事件 句柄 对 应 的 处 理 函数 (event handler) 会 用 到 
它们 。 对 于 创建 鼠标 事件 、 键 盘 事件 还 是 其 他 事件 的 对 象 之 间 是 没有 区 别 的 ， 因 为 一 个 通用 的 事件 对 象 ， 
可 以 被 任何 类 型 的 事件 触发 。 

值得 注意 的 是 ， 在 DOM 的 键盘 事件 模拟 中 ， 对 于 一 个 keypress 模拟 事件 的 结果 不 会 作为 字符 出 现在 
textbox 中 ， 即 使 对 应 的 事件 处 理 函数 已 经 触发 。 


20.7 ”制作 可 关闭 的 窗 体 对 象 


很 多 DOM 对 象 都 有 原生 的 事件 支持 ， 例 如 DIV 中 就 有 click、mouseover 等 事件 ， 事 件 机 制 可 以 为 类 
的 设计 带 来 很 大 的 灵活 性 。 不 过 ， 随 着 Web 技术 的 发 展 ， 使 用 JavaScript 自 定义 对 象 愈 发 频繁 ， 让 自己 创 
建 的 对 象 也 有 事件 机 制 ， 通 过 事件 对 外 通信 ， 能 够 极 大 提高 开发 效率 。 下 面 制作 一 个 可 关闭 窗 体 对 象 ， 来 
学 习 事件 的 综合 应 用 

步骤 1: 设计 HTML 框架 ， 具体 的 代码 如 下 : 


<!DOCTYPE html> 
<html> 
<head> 
<title> 创 建 可 关闭 的 窗 体 对 象 </title> 
</head> 
<body> 
<div id="pageCover" class="pageCover"></div> 
<input type="button" value=" 窗 体 对 象 " onclick="openDialog();"/> 


<div id="dlgTest" class="dialog"> 
<img class="close" alt="" src="close.png"> 
<div class="title"> 窗 体 对 象 </div> 
<div class="content"> 
</div> 
</div> 
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相关 的 代码 实例 请 参考 Chap20.26.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-50 
所 示 。 


图 20-50 程序 运行 结果 
步骤 2: 在 页 面 中 添加 CSS 代码 ， 定 义 网 页 的 样式 ， 具 体 代码 如 下 ; 
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相关 的 代码 实例 请 参考 Chap20.26.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-51 
所 示 。 


图 20-51 程序 运行 结果 
步骤 3， 在 页 面 中 添加 JavaScript 代码 ， 实 现 窗 体 的 打开 与 关闭 ， 具 体 代码 如 下 
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相关 的 代码 实例 请 参考 Chap20.26.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 20-52 
所 示 。 


图 20-52 程序 运行 结果 


单 击 “ 窗 体 对 象 ”按钮 ， 即 可 在 页 面 中 打开 一 个 窗 体 对 象 ， 单 击 窗 体 对 象 上 的 “关闭 ”按钮 ， 即 可 关 
闭 窗 体 对 象 ， 结 果 如 图 20-53 所 示 。 
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图 20-53 ”关闭 窗 体 对 象 


20.8 ”就 业 面试 技巧 与 解析 


20.8.1 面试 技巧 与 解析 (一 ) 


面试 官 : 谈 谈 你 的 家 庭 情况 吧 。 

应 聘 者 : 我 很 爱 我 的 家 庭 ， 我 的 家 庭 一 向 很 和 睦 ， 虽 然 我 的 父亲 和 母亲 都 是 普通 人 ， 但 是 从 小 ， 我 就 
看 到 我 父亲 起 早 贪 黑 ， 每 天 工作 特别 辛劳 ， 他 的 行动 无 形 中 培养 了 我 认真 负责 的 态度 和 勤劳 的 精神 。 我 母 
亲 为 人 善良 ， 对 人 热情 ， 特 别 乐于 助人 ， 所 以 在 单位 人 缘 很 好 ， 她 的 一 言 一 行 也 一 直 在 教导 我 做 人 的 道理 。 


20.8.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 你 想 要 申请 这 个 职位 ， 你 认为 你 除了 具备 相关 专业 知识 外 ， 还 欠缺 什么 ? 

应 聘 者 : 对 于 这 个 职位 和 我 的 能 力 来 说 ， 我 相信 自己 是 可 以 胜任 的 ， 只 是 缺乏 经 验 ， 这 个 问题 我 想 我 
可 以 进入 公司 以 后 以 最 短 的 时 间 来 解决 ， 我 的 学 习 能 力 很 强 ， 我 相信 可 以 很 快 融入 公司 的 企业 文化 ， 进 入 
工作 状态 。 
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JavaScript 客户 端 开 发 技术 


目前 , 绝 大 多 数 浏览 器 中 都 嵌入 了 某 个 版 本 的 JavaScript 解释 器 , 当 JavaScript 被 嵌入 客户 端 浏览 器 后 ， 
就 形成 了 客户 端的 JavaScript。 大 多 数 人 提 到 JavaScript 时 ， 通 常 指 的 是 客户 端的 JavaScript。 本 章 介 绍 
JavaScript 客户 端 开发 的 相关 技术 。 


二 ”重点 导读 
。 了 解 客户 端 JavaScript 的 重要 性 。 
。 掌 握 在 HIML 中 调 入 JavaScript 的 5 种 方法 。 
* 掌 握 JavaScript 的 线程 模型 技术 的 应 用 方法 。 
。 掌 握 客户 端 JavaScript 的 应 用 案例 中 的 技术 。 


在 大 多 数 用 户 看 来 ，JavaScript 的 应 用 环境 是 Web 浏览 器 ， 这 也 的 确 是 该 语言 最 早 的 设计 目标 。 然 而 


2 


客户 端 JavaScript 的 重要 性 


从 很 早 开始 ，JavaScript 语言 就 已 经 在 其 他 的 复杂 应 用 环境 中 使 用 ， 并 受 这 些 应 用 环境 的 影响 而 发 展 出 新 的 
语言 特性 了 。 本 节 介 绍 客户 端 JavaScript 的 重要 性 。 


3 祝 21.1.1 JavaScript 应 用 环境 的 组 成 


的 应 用 环境 ， 主 要 由 宿主 环境 和 运行 期 环境 构成 。 其 中 ， 宿 主 环 境 是 指 外 壳 程 序 (Shell) 和 
而 运行 期 环境 则 是 由 JavaScript 引擎 内 建 的 环境 。 


JavaScript 
Web 浏览 器 等 ， 


宿主 环境 一 般 由 外 这 程序 创建 和 维护 , 它 不 仅仅 为 JavaScript 语言 提供 服务 , 而 且 往 往 一 个 宿主 环境 中 
可 能 运行 很 多 种 脚本 语言 。 宿 主 环境 一 般 会 创建 一 套 公共 对 象 系统 ， 这 套 对 象 系统 对 所 有 脚本 语言 开放 ， 


允许 它们 自 


访问 。 同 时 ， 宿 


E 环 境 还 会 提供 公共 接口 ， 用 来 装载 不 同 的 脚本 语言 引擎 。 这 样 我 们 可 以 
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在 同一 个 宿主 环境 中 装载 不 同 的 脚本 引擎 ， 并 人 允许 它们 共享 宿主 对 象 。 

执行 期 环境 是 由 宿主 环境 通过 脚本 引擎 创建 的 , 实际 上 就 是 由 JavaScript 引擎 创建 的 一 个 代码 解析 初始 
化 环境 。 初 始 化 内 容 主要 包括 如 下 几 点 。 

一 套 与 宿主 环境 相 联系 的 规则 。 

JavaScript 引擎 内 核 〈 基 本 语法 规范 、 逻 辑 、 命 令 和 算法 )。 

一 组 内 置 对 象 和 API。 

当然 , 不 同 的 JavaScript 引擎 定义 的 初始 化 环境 是 不 同 的 ， 这 就 形成 了 所 谓 的 浏览 器 兼容 问题 ， 因 为 不 
同 的 浏览 器 使 用 不 同 的 JavaScript 引擎 。 不 同 JavaScript 引擎 在 解析 相同 的 JavaScript 代码 时 ， 实 现 的 逻辑 
和 算法 可 能 存在 分 歧 ， 当 然 运 行 的 结果 也 会 过 异 。 


21.1.2 ”客户 端 JavaScript 主要 作用 


提起 客户 端 那么 就 一 定 有 相应 的 服务 器 端 ， 而 JavaScript 主要 是 应 用 在 客户 端 ，JavaScript 服务 器 端 最 
早 实现 动态 网 页 的 技术 是 CGI Common Gateway Interface (通用 网 关 接 口 ) 技术 ， 它 可 根据 用 户 的 HTTP 请 
求 数据 的 动态 从 Web 服务 器 返回 请 求 的 页 面 。 
当 用 户 从 Web 页 面 提交 HTML 请 求 数据 后 ，Web 浏览 器 发 送 用 户 的 请 求 到 Web 服务 器 上 ， 服 务 器 运 
行 CGI 程序， 后 者 提取 HTTP 请 求 数据 中 的 内 容 初始 化 设置 ， 同 时 交互 服务 器 端的 数据 库 ， 然 后 将 运行 结 
果 返 回 Web 服务 器 端 , Web 服务 器 根据 用 户 请 求 的 地 址 将 结果 返回 该 地 址 的 浏览 器 。 从 整个 过 程 来 讲 , CGI 
程序 运行 在 服务 器 端 ， 同 时 需要 与 数据 库 交 换 数 据 ， 这 需要 开发 者 拥有 相当 的 技巧 ， 同 时 拥有 服务 器 端 网 
站 开发 工具 ， 程 序 的 编写 、 调 试 和 维护 过 程 十 分 复杂 。 
同时 ， 由 于 整个 处 理 过 程 全 部 在 服务 器 端 处 理 ， 无 疑 是 服务 器 处 理 能 力 的 一 大 硬 伤 ， 而 且 客户 端 页 面 
的 反应 速度 不 容 乐 观 。 基 于 此 ， 客 户 端 脚本 语言 应 运 而 生 ， 它 可 直接 嵌入 HTML 页 面 中 ， 及 时 响应 用 户 的 
事件 ， 大 大 提高 页 面 反应 速度 。 

脚本 分 为 客户 端 脚本 和 服务 器 端 脚本 ， 其 主要 区 别 如 表 21-1 所 示 。 


表 21-1 客户 端 脚本 与 服务 器 端 脚本 的 区 别 


当 用 户 通过 客户 端 浏 览 器 发 送 HTTP 请 求 

时 , Web 服务 器 将 HTML 文档 部 分 和 脚本 

部 分 返回 客户 端 浏览 器 ， 在 客户 端 浏览 器 

客户 端 脚本 客户 端 浏 览 器 中 解释 执行 并 及 时 更 新 页 面 ， 脚 本 处 理工 | JavaScript、JScript、VBScript 等 
作 全 部 在 客户 端 浏览 器 完成 ， 减 轻 服务 器 

负荷 ， 同 时 增加 页 面 的 反应 速度 ， 但 浏览 

器 差异 性 导致 的 页 面 差异 问题 不 容 忽视 


当 用 户 通过 客户 端 浏览 器 发 送 HTTP 请 求 

时 ，Web 服务 器 运行 脚本 , 并 将 运行 结果 与 

Web 页 面 的 HIML 部 分 结合 返回 至 客户 端 

服务 器 端 脚本 Web 服务 器 浏览 器 ， 脚 本 处 理工 作 全 部 在 服务 器 端 完 | PHP、JSP、ASP、Ped、LiveWire 等 
成 ， 增 加 了 服务 器 的 负荷 ， 同 时 客户 端 反 

应 速度 慢 , 但 减少 了 由 于 浏览 器 差异 带 来 的 

运行 结果 差异 ， 提 高 了 页 面 的 稳定 性 
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客户 端 脚本 ， 在 页 面 反应 速度 、 减 轻 服务 器 负荷 等 方面 效果 非常 明显 ， 但 由 于 浏览 器 对 其 支持 的 程度 不 同 
导致 的 页 面 差异 性 问题 也 不 容 小 遍 。 


对 21.1.3 ”其 他 环境 中 的 JavaScript 


除了 Web 应 用 的 相关 领域 之 外 ，JavaScript 还 能 够 在 多 种 不 同 的 环境 中 运行 。 在 较 早 一 些 的 时 候 ， 
Microsoft 已 经 在 Windows 系统 中 支持 一 种 HTA 应 用 , 这 可 以 看 作 是 由 JavaScript +HTML 编写 的 类 似 GUI 
的 应 用 程序 ， 类 似 这 样 的 情况 还 有 很 多 ， 这 里 不 再 详 述 。 


E2114 客户 端的 JavaScript: 网 页 中 的 可 执行 内 容 
[eh 


当 一 个 Web 浏览 器 嵌入 了 JavaScript 解释 器 时 , 它 就 允许 可 执行 的 内 容 以 JavaScript 的 形式 在 用 户 客户 
端 浏览 器 中 运行 。 

JavaScript 当然 不 仅仅 是 用 来 简单 地 向 HTML 文档 输出 文本 内 容 的 ， 事 实 上 它 可 以 控制 大 部 分 浏览 器 
相关 的 对 象 ， 浏 览 器 为 JavaScript 提供 了 强大 的 控制 能 力 ， 使 得 它 不 仅 能 够 控制 HTML 文档 的 内 容 ， 而 且 
能 够 控制 这 些 文档 元 素 的 行为 。 


21.2 HTML 与 JavaScript 


创建 好 JavaScript 脚本 后 ,还 需要 结合 HTML 代码 ,才能 发 挥 JavaScript 的 强大 编码 功能 ， 下 面 就 来 介 
绍 如 何在 HTML 中 使 用 JavaScript 脚本 。 


国 5 国 
21.2.1 在 HTML 头 部 嵌入 JavaScript 代码 
回 
如 果 不 是 通过 JavaScript 脚本 生成 HTML 网 页 的 内 容 ，JavaScript 脚本 一 般 放 在 HTML 网 页 的 头 部 的 
<head> 与 </head> 标 签 对 之 间 。 这 样 ， 不 会 因为 JavaScript 影响 整个 网 页 的 显示 结果 。 
【 例 21-1】 实例 文件 ，ch21\Chap21.1.html》 在 HTML 头 部 嵌入 JavaScript 代码 。 


<!DOCTYPE html> 
<html> 
<head> 
<script language = "javascript"> 
document .write ("欢迎 来 到 JavaScript 动态 世界 "); 
</script> 
</head> 
<body> 
<p> 学 习 Javascript! ! ! 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap21.1.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 21-1 所 
示 ， 可 以 看 到 网 页 输出 了 两 句 话 ， 其 中 第 一 句 就 是 JavaScript 中 的 输出 语句 。 
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图 21-1 程序 运行 结果 


21.2.2 ”在 网 页 中 榜 入 JavaScript 代码 


当 需 要 使 用 JavaScript 脚 本 生成 HTML 网 页 内 容 时 ,如 某 些 JavaScript 实 现 的 动态 树 ,就 需要 把 JavaScript 
放 在 HTML 网 页 主题 部 分 的 <body> 与 </body> 标 签 对 中 。 
【 例 21-2】 实例 文件 ，ch21\Chap21.2.html)〉 在 HTML 网 页 中 嵌入 JavaScript 代码 。 


<!DocTYPE html> 

<html> 

<head> 

</head> 

<body> 
<p> 学 习 Javascript!l ! ! </p> 
<script language = "javascript"> 

document .write ("欢迎 来 到 JavaSscript 动态 世界 ") 7 

</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap21.2.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 21-2 所 
示 ， 可 以 看 到 网 页 输出 了 两 句 话 ， 其 中 第 二 句 就 是 JavaScript 中 的 输出 语句 。 


OD x 
司 cyueereabneupec 站 -6 | 七 CAseri\jiongu\ Do * 
MA MEE) FEV ABAN IARN MM 


学 习 Javag 


R00% ~ 


图 21-2 程序 运行 结果 


21.2.3 ”在 元 素 事件 中 嵌入 JavaScript 代码 


当 需 要 对 HTML 网 页 中 的 元 素 进行 事件 处 理 时 〈 验 证 用 户 输入 的 值 是 否 有 效 )， 如 果 事 件 处 理 的 
JavaScript 代码 量 较 少 ， 就 可 以 直接 在 对 应 的 HTML 网 页 的 元 素 事件 中 嵌入 JavaScript 代码 。 
【 例 21-3】 实例 文件 ，ch21\Chap21.3.html〉 在 网 页 元 素 事 件 中 嵌入 JavaScript 代码 。 


<!DOCTYPE html> 

<html> 

<head> 

<title> 判 断 文本 框 是 否 为 空 </title> 
<script language="Javascript"> 
function validate() 

{ 
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var txtNameObj = document.all.txtName; 
var txtNameValue = txtNameObj.value; 
if(( txtNameValue == null) || ( txtNameValue-length < 1)) 
上 
window.alert ("文本 框 内 容 为 空 , 请 输入 内 容 ") ; 
_txtNameObj -focus (); 
return; 
攻 
} 
</script> 
</head> 
<body> 
<form method=post action="#"> 
<input type="text" name="txtName"> 
<input type="button"” value=" 确 定 "” onclick="validate()"> 
</form> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap21.3.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 21-3 


所 示 。 


如 果 不 在 文本 框 中 输入 任何 内 容 ， 直 接 单 击 “确定 ”按钮 ， 即 可 看 到 “文本 框 内 容 为 空 ， 请 输入 内 容 ” 


的 提示 信息 ， 如 图 21-4 所 示 。 


21. 
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生 区 相册 窑 力 空 ,请 缠 入 记 窑 


i 
图 21-3 程序 运行 结果 图 21-4 “程序 运行 结果 


2.4 调用 已 经 存在 的 JavaScript 文件 
如 果 JavaScript 的 内 容 较 多 ， 或 者 多 个 HTML 网 页 中 都 调用 相同 的 JavaScript 程序 ， 可 以 将 较 长 的 


JavaScript 或 者 通用 的 JavaScript 写成 独立 的 ,js 文件 ， 直 接 在 HTML 网 页 中 调用 。 


482 


【 例 21-4】 (实例 文件 : ch21\Chap21.4.html) 调用 已 经 存在 的 JavaScript 文件 。 


<!DocTYPE html> 
<html> 

<head> 

<title> 使 用 外 部 文件 </title> 

<script src = "hello.js"></script> 
</head> 

<body> 

<p> 此 处 引用 了 一 个 Javascript 文件 
</body> 

</html> 


hellojjs 文件 的 内 容 如 下 
alert ("欢迎 大 家 学 习 Javascript"); 
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相关 的 代码 实例 请 参考 Chap21.4.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 21-5 
所 示 。 
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21-5 程序 运行 结果 


21.2.5 ”使 用 伪 URL 地 址 引入 JavaScript 脚本 代码 


在 多 数 支持 Javascript 脚本 的 浏览 器 中 ， 可 以 通过 JavaScript 伪 URL 地 址 调用 语句 来 引入 JavaScript 
脚本 代码 。 伪 URL 地 址 的 一 般 格 式 如 下 : 

Javascript:alert ("已 点 击 文本 框 ! ") 

由 上 可 知 ， 伪 URL 地 址 语句 一 般 以 JavaScript 开始 ， 后 面 就 是 要 执行 的 操作 。 

【 例 21-5】〔 实 例文 件 ，ch21\Chap21.5.html) 使 用 URL 地 址 引入 JavaScript 脚本 代码 。 


<!DocTYPE html> 
<html> 
<head> 
<title> 伪 URL 地 址 引入 JavaScript 脚本 代码 </title> 
</head> 
<body> 
<center> 
<p> 使 用 伪 URL 地 址 引入 Javascript 脚本 代码 </p> 
<form name="Forml"> 
<input type=text name="Textl" value=" 单 击 " 
onclick="JavaSscript:alert(' 已 经 用 鼠标 单 击 文本 框 !')"> 
</form> 
</center> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap21.5.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 里 面 运行 ， 用 鼠标 单 击 其 
中 的 文本 框 ， 就 会 看 到 “已 经 用 鼠标 点 击 文本 框 !” 的 提示 信息 ， 其 显示 结果 如 图 21-6 所 示 。 


21-6 ”程序 运行 结果 
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21.3 JavaScript 的 线程 模型 技术 


客户 端 JavaScript 采用 单线 程 模型 技术 。 所 谓 单线 程 模型 是 指 JavaScript 只 在 一 个 线程 上 运行 。 也 就 是 
说 ，JavaScript 同时 只 能 执行 一 个 任务 ， 其 他 任务 都 必须 在 后 面 排队 等 待 。 


21.3.1 单线 程 模型 技术 


JavaScript 只 在 一 个 线程 上 运行 ， 不 代表 JavaScript 引擎 只 有 一 个 线程 。 事 实 上 ，JavaScript 引擎 有 多 个 
线程 , 单个 脚本 只 能 在 一 个 线程 上 运行 ， 其 他 线程 都 是 在 后 台 配 合 。JavaScript 采用 单线 程 ， 而 不 是 多 线程 ， 
跟 历 史 有 关系 。 

JavaScript 从 诞生 起 就 是 单线 程 ， 原 因 是 不 想 让 浏览 器 变 得 太 复杂 ， 因 为 多 线程 需要 共享 资源 ， 且 有 可 
能 修改 彼此 的 运行 结果 ， 对 于 一 种 网 页 脚本 语言 来 说 ， 这 就 太 复杂 了 。 例 如 ， 假 定 JavaScript 同时 有 两 个 线 
程 ， 一 个 线程 在 某 个 DOM 节点 上 添加 内 容 ， 另 一 个 线程 删除 了 这 个 节点 ， 这 时 浏览 器 应 该 以 哪个 线程 为 
准 ? 所 以 , 为 了 避免 复杂 性 ， 从 一 诞生 ，JavaScript 就 是 单线 程 ， 这 已 经 成 了 这 门 语言 的 核心 特征 ， 将 来 应 
该 也 不 会 改变 。 

为 了 利用 多 核 CPU 的 计算 能 力 ，HTML 5 提出 Web Worker 标准 ， 人 允许 JavaScript 脚本 创建 多 个 线程 ， 
但 是 子 线程 完全 受 主线 程控 制 ， 且 不 得 操作 DOM。 所 以 , 这 个 新 标准 并 没有 改变 JavaScript 单线 程 的 本 质 。 

不 过 ， 单 线程 模型 也 给 用 户 带 来 了 一 些 问题 ， 主 要 是 新 的 任务 被 加 在 队列 的 尾部 ， 只 有 前 面 的 所 有 任 
务 运行 结束 ， 才 会 轮 到 它 执行 。 如 果 有 一 个 任务 特别 耗 时 ， 后 面 的 任务 都 会 停 在 那里 等 待 ， 造 成 浏览 器 失 
去 响应 ， 又 称 “ 假 死 "。 为 了 避免 “假死 ” 当 某 个 操作 在 一 定时 间 后 仍 无 法 结束 ， 浏 览 器 就 会 跳出 提示 框 ， 

询问 用 户 是 否 要 强行 停止 脚本 运行 。 


21.3.2 消息 队列 运行 方式 


JavaScript 运行 时 ， 除 了 一 个 运行 线程 ， 引 擎 还 提供 一 个 消息 队列 (message queue)， 里 面 是 各 种 需要 
当前 程序 处 理 的 消息 。 新 的 消息 进入 队列 的 时 候 ， 会 自动 排 在 队列 的 尾 端 运行 线程 ， 只 要 发 现 消息 队列 不 
为 空 ， 就 会 取出 排 在 第 一 位 的 那个 消息 ， 执 行 它 对 应 的 回调 函数 。 等 到 执行 完 ， 再 取出 排 在 第 二 位 的 消息 ， 
不 断 循环 ， 直 到 消息 队列 变 空 为 止 。 

每 条 消息 与 一 个 回调 函数 相 联 系 ， 也 就 是 说 ， 程 序 只 要 收 到 这 条 消息 ， 就 会 执行 对 应 的 函数 。 另 外 ， 
进入 消息 队列 的 消息 ， 必 须 有 对 应 的 回调 函数 。 否 则 这 个 消息 就 会 遗失 ， 不 会 进入 消息 队列 。 例 如 ， 鼠 标 
单 击 就 会 产生 一 条 消息 , 报告 click 事件 发 生 了 。 如 果 没 有 回调 函数 ,这 个 消息 就 会 遗失 。 如 果 有 回调 函数 ， 
这 个 消息 进入 消息 队列 ， 等 到 程序 收 到 这 个 消息 ， 就 会 执行 click 事件 的 回调 函数 。 

还 有 一 种 情况 是 setTimeout 会 在 指定 时 间 向 消息 队列 添加 一 条 消息 。 如 果 消 息 队 列 之 中 ， 此 时 没有 其 
他 消息 ， 这 条 消息 会 立即 得 到 处 理 ， 否 则 ， 这 条 消息 不 得 不 等 到 其 他 消息 处 理 完 ， 才 能 得 到 处 理 。 因 此 ， 
setTimeout 指定 的 执行 时 间 ， 只 是 一 个 最 早 可 能 发 生 的 时 间 ， 并 不 能 保证 会 在 那个 时 间 发 生 。 


21.3.3 Event Loop 机 制 


Event Loop 机 制 指 的 是 一 种 内 部 循环 ， 用 来 一 轮 又 一 轮 地 处 理 消息 队列 之 中 的 消息 ， 即 执行 对 应 的 回 
调 函 数 。 下 面 是 一 些 常见 的 JavaScript 任务 。 
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执行 JavaScript 代码 。 

对 用 户 的 输入 (包含 鼠标 单 击 、 键 盘 输 入 等 ) 做 出 反应 。 

处 理 异 步 的 网 络 请 求 。 

所 有 任务 可 以 分 成 两 种 ， 一 种 是 同步 任务 (synchronous)， 另 一 种 是 异步 任务 (asynchronous )。 

同步 任务 , 是 指 在 JavaScript 执行 进程 上 排队 执行 的 任务 ， 只 有 前 一 个 任务 执行 完毕 ， 才 能 执行 后 一 
个 任务 ; 异步 任务 , 是 指 不 进入 JavaScript 执行 进程 ,而 进入 “任务 队列 ”(task queue) 的 任务 , 只 有 “ 任 
务 队 列 ” 通 知 主 进程 ， 某 个 异步 任务 可 以 执行 了 ， 该 任务 〈 采 用 回调 函数 的 形式 ) 才 会 进入 JavaScript 
进程 执行 。 

也 就 是 说 ， 虽 然 JavaScript 只 有 一 个 进程 用 来 执行 ， 但 是 并 行 的 还 有 其 他 进程 〈 例 如 ， 处 理 定时 器 的 进 
程 、 处 理 用 户 输入 的 进程 、 处 理 网 络 通信 的 进程 等 )。 这 些 进 程 通过 向 任务 队列 添加 任务 ， 实 现 与 JavaScript 
进程 通信 。 


21.4 客户 端 JavaScript 的 简单 应 用 


本 例 是 一 个 简单 的 JavaScript 程序 ， 主 要 实现 的 功能 为 : 当 页 面 打开 时 ， 显 示 “ 尊 敬 的 客户 ， 欢 迎 您 光 
临 本 网 站 ”窗口 ， 关 闭 页 面 时 弹出 窗口 “欢迎 下 次 光临 1”。 

【 例 21-6】〔 实 例文 件 ，ch21\Chap21.6.html〉 客 户 端 JavaScript 的 简单 应 用 。 

步骤 1: 设计 HTML 框架 ,具体 的 代码 如 下 : 

<!DOCTYPE html> 

<html> 

<head> 

<title> 客 户 端 Javascript 的 简单 应 用 </title> 

</head> 

<body> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap21.6html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 显示 的 结果 如 图 21-7 
所 示 。 


- 0O x 
国 GWUsersqiangwDoc P -5 | 顾客 > 当 javaScript 的 和 
文件 月 。 编 生 FE) 至 看 (V) 收 训 (A) 工具 (1) 都 则 (H) 


区 100% ~ 
图 21-7 程序 运行 结果 
步骤 2: 在 页 面 头 部 添加 JavaScript 代码 ， 实 现 网 页 交互 功能 ， 具 体 代码 如 下 : 


<script> 
<script> 
// 页 面 加 载 时 执行 的 函数 


function showEnter(){ 
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alert (" 尊 敬 的 客户 ,欢迎 您 光临 本 网 站 ") ; 


恬 
// 页 面 关闭 时 执行 的 函数 
function showLeave(){ 


alert ("欢迎 下 次 光临 ! "); 


有 

// 页 面 加 载 事件 触发 时 调用 函数 
window.onload=showEnter; 

// 页 面 关闭 加 载 事件 触发 时 调用 函数 


window.onbeforeunload=showLeave; 
</script> 


相关 的 代码 实例 请 参考 Chap21.6.html 文件 , 然后 双击 该 文件 , 在 正 浏览 器 中 运行 显示 的 结果 如 图 21-8 
所 示 。 
关闭 网 页 窗口 时 ， 会 弹出 一 个 信息 提示 框 ， 提 示 用 户 “欢迎 下 次 光临 !”， 如 图 21-9 所 示 。 


来 自 网 页 的 消息 


六 网 的 江 息 x 


全 允 0@ 下 次 光临 1 


在 Sa, PSST 


Ca Cw ] 
图 21-8 ”程序 运行 结果 图 21-9 程序 运行 结果 


21.5 ”就 业 面试 技巧 与 解析 


21.5.1 面试 技巧 与 解析 (一) 


面试 官 : 你 希望 与 什么 样 的 上 级 共事 ? 
应 聘 者 : 作为 一 名 刚 步 入 社会 的 新 人 ， 我 应 该 多 要 求 自己 尽快 熟悉 环境 、 适 应 环境 ， 而 不 应 该 对 环境 
提出 什么 要 求 ， 只 要 能 发 挥 我 的 专长 就 可 以 了 。 


21.5.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 你 工作 经 验 欠缺 ， 如 何 能 胜任 这 项 工作 ? 

应 聘 者 : 作为 应 届 毕 业 生 ， 在 工作 经 验方 面 的 确 会 有 所 欠缺 ， 因 此 在 读书 期 间 我 一 直 利用 各 种 机 会 在 
这 个 行业 里 做 兼职 。 我 也 发 现 ， 实 际 工作 远 比 书本 知识 丰富 、 复 杂 。 但 我 有 较 强 的 责任 心 、 适 应 能 力 和 学 
习 能 力 ， 而 且 比 较 勤奋 ， 所 以 在 兼职 中 均 能 圆满 完成 各 项 工作 ， 从 中 获取 的 经 验 也 令 我 受益 菲 浅 。 请 贵 公 
司 放心 ， 学 校 所 学 及 兼职 的 工作 经 验 使 我 一 定 能 胜任 这 个 职位 。 
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过 学 习 指引 


JavaScript 本 身 是 一 门 脚本 语言 ， 脚 本 语言 通常 用 来 调用 接口 和 功能 ， 本 身 也 具有 高 级 语言 的 特性 ， 所 
以 可 以 在 服务 器 端 使 用 。 本 章 介 绍 JavaScript 服务 器 端的 相关 开发 技术 与 知识 。 


重点 导读 


。 了 解 服务 器 端 JavaScript 的 应 用 技术 。 

。 理 解 浏览 器 端 和 服务 器 端 技术 的 不 同 。 
。 掌 握 JavaScript 与 数据 库 连 接 的 方法 。 

。 掌 握 JavaScript 时 钟 的 实例 。 


22.1 认识 服务 器 端 JavaScript 
本 节 开 始 学 习 服务 器 端 JavaScript 的 基本 概念 。 


22.1.1 服务 器 端 JavaScript 的 由 来 


目前 ， 几 乎 所 有 的 主流 浏览 器 都 将 JavaScript 作为 标准 语言 ， 可 以 说 JavaScript 成 了 世界 上 最 受 欢 迎 的 
编程 语言 。 它 是 网 页 的 通用 语言 ， 虽 然 网 页 开发 师 有 各 自 喜好 和 首选 的 动态 语言 ， 但 回 到 浏览 器 端 ， 大 家 
会 不 约 而 同 地 选择 JavaScript。 

既然 能 在 浏览 器 中 使 用 JavaScript, 为 什么 不 能 在 服务 器 里 呢 ? 单 种 语言 贯穿 全 线 减少 了 既 要 编写 服务 
器 端 脚本 又 要 编写 客户 端 脚本 的 工程 师 的 烦恼 。 为 此 ，1996 年 ， 在 发 布 了 首 个 版 本 的 浏览 器 两 年 之 后 ， 网 
景 (NetScape) 公司 推出 了 服务 器 端 JavaScript， 不 过 ， 当 时 它 的 影响 力 远 不 及 客户 端 JavaScript， 于 是 这 个 
概念 很 快 隐 退 ，JavaScript 便 主要 应 用 在 浏览 器 上 。 

现在 , 随 着 浏览 器 之 间 的 激烈 竞争 ，JavaScript 的 性 能 快速 提升 ， 除 浏览 器 以 外 的 应 用 ， 服 务 器 端 JavaScript 
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是 最 吸引 人 的 选择 。 服 务 器 端 JavaScript 可 以 同 NoSQL 数据 库 进行 良好 契合 ， 这 些 数据 库 倾向 于 使 用 HTTP 进 
行 通信 ， 在 某 些 情况 下 采用 JSON (JavaScript Object Notation) 作为 消息 格式 ，JavaScript 库 包 括 对 此 类 交互 形 
式 的 支持 ， 一 些 NoSQL 系统 超越 了 数据 存续 的 层面 ， 进 入 了 成 熟 的 JavaScript 应 用 环境 。 


22.1.2 ”运行 服务 器 端 JavaScript 的 方法 


运行 服务 器 端 JavaScript 最 简单 的 办 法 是 将 JavaScript 引擎 植 入 网 页 服务 器 中 。 有 许多 开源 项 目 可 选 ， 

于 不 同 项 目 所 采用 的 编程 语言 不 同 ， 影响 到 它 可 以 运行 的 环境 ， 以 及 常见 的 性 能 和 支持 方面 的 问题 。 
例如 ， 许 多 JavaScript 平台 运行 在 Rhino 引擎 上 ， 而 Rhino 构建 于 Java， 这 意味 着 它们 更 容易 同 Java 部 件 
集成 。 因 而 ,用 户 可 以 在 JavaScript 中 构建 完整 的 用 户 界面 ， 包 括 在 服务 器 之 上 的 用 户 界面 层 ， 而 且 还 可 以 
由 常见 的 企业 级 Java 栈 做 支撑 。 

一 旦 在 网 页 服务 器 中 装 上 JavaScript 引擎 ， 就 可 以 像 使 用 其 他 语言 一 样 ， 撰 写 简单 的 CGI 脚本 来 读 取 
请 求 、 回 写 响应 。 在 实际 应 用 中 ， 还 需要 有 良好 的 库 支持 。 某 些 环境 默认 带 库 ， 这 时 用 户 可 以 利用 为 浏览 
器 端 JavaScript 而 开发 的 库 。 


加 22.1.3 ”服务 器 端 JavaScript 的 运行 环境 


服务 器 端 JavaScript 的 运行 环境 是 Nodejs。 简 单 地 说 ，Nodejs 就 是 运行 在 服务 端的 JavaScript， 既 是 
一 个 基于 Chrome JavaScript 运行 时 建立 的 平台 , 还 是 一 个 事件 驱动 TO 服务 端 JavaScript 运行 环境 。 该 环境 
基于 Google 的 V8 引擎 ，V8 引擎 执行 JavaScript 的 速度 非常 快 ， 性 能 非常 好 ， 由 于 Nodejs 的 非 阻塞 与 支 
持 高 并 发 的 特性 已 经 被 广泛 应 用 在 服务 器 端 了 。 


22.1.4 JavaScript 在 网 站 开发 中 的 作用 


JavaScript 在 网 站 开发 中 的 主要 作用 之 一 就 是 特效 制作 。 例 如 ， 在 网 页 中 鼠标 放 到 链接 上 ， 然 后 单 击 一 
下 就 出 现 一 个 登录 框 ， 还 有 就 是 验证 文本 框 中 有 没有 输入 内 容 等 ， 这 都 是 由 JavaScript 来 实现 的 。 

JavaScript 对 于 程序 员 来 说 可 以 使 用 它 减 轻 后 全 处 理 逻 辑 的 负担 ， 对 于 使 用 者 来 说 可 以 增强 使 用 体验 。 
要 想 使 网 页 具有 交互 性 , 包含 更 多 活跃 的 元 素 , 就 有 必要 在 网 页 中 嵌入 其 他 的 技术 。 如 : JavaScript VBScript、 
DOM、Layers 和 CSS 等 。 

在 HTML 基础 上 ， 使 用 JavaScript 可 以 开发 交互 式 Web 网 页 。JavaScript 的 出 现 使 得 网 页 和 用 户 之 间 
实现 了 一 种 实时 性 的 、 动 态 的 、 交 互 性 的 关系 ， 使 网 页 包含 更 多 活跃 的 元 素 和 更 加 精彩 的 内 容 。 运 用 
JavaScript 编写 的 程序 需要 能 支持 JavaScript 语言 的 浏览 器 。Netscape 公司 Navigator 3.0 以 上 版 本 的 浏览 器 
都 能 支持 JavaScript 程序 ， 微 软 公司 Internet Explorer 3.0 以 上 版 本 的 浏览 器 基本 上 支持 JavaScript。 

总 之 ，JavaScript 可 以 使 网 页 增加 互动 性 ，JavaScript 使 有 规律 的 重复 的 HTML 代码 简化 ， 减 少 下 载 时 
间 ， 还 能 及 时 响应 用 户 的 操作 ， 对 提交 表单 做 即时 的 检查 ， 无 须 浪费 时 间 交 由 CGI 验证 。 


22.2 ”浏览 器 端 与 服务 器 端 


通过 在 服务 器 端 应 用 JavaScript， 可 以 使 用 户 在 浏览 器 端 查看 具体 的 用 户 体现 。 下 面 介绍 浏览 器 端 与 服 
务 器 端的 相关 技术 与 特点 。 
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1. 什么 是 B/S 技术 

B/S 是 Browser/Server (浏览 器 /服务 器 ) 的 缩写 , 客户 机 上 只 要 安装 一 个 浏览 器 (Browser), 如 Netscape 
Navigator 或 Internet Explorer， 服 务 器 安装 Oracle、Sybase、Informix 或 SQL Server 等 数据 库 。 在 这 种 结构 
下 ， 用 户 界面 完全 通过 WWW 浏览 嚣 实现， 一 部 分 事务 逻辑 在 前 端 实现 ， 但 是 主要 事务 逻辑 在 服务 器 端 实 
现 ， 浏 览 器 通过 Web Server 同 数据 库 进 行 数据 交互 。 


2. B/S 技术 特点 

B/S 最 大 的 技术 特点 就 是 可 以 在 任何 地 方 进行 操作 而 不 用 安装 专门 的 软件 ， 只 要 有 一 台 能 上 网 的 计算 
机 就 能 使 用 , 客户 端 零 安装 、 零 维护 。 系 统 的 扩展 非常 容易 。B/S 结构 的 使 用 越 来 越 多 , 特别 是 推动 了 AJAX 
技术 的 发 展 ， 它 的 程序 也 能 在 客户 端 计算 机 上 进行 部 分 处 理 ， 从 而 大 大 地 减轻 了 服务 器 的 负担 ， 并 增强 了 
交互 性 ， 能 进行 局 部 实时 刷新 。 


22.3 JavaScript 与 数据 库 的 连接 


JavaScript 可 以 与 数据 库 连 接 。 下 面 以 JavaScript 中 Nodejs 库 文件 连接 MySQL 数据 库 为 例 介绍 连接 数 
据 库 的 方法 ， 连 接 好 数据 库 后 ， 还 可 以 操作 数据 库 ， 如 查询 数据 、 插 入 数据 、 更 新 数据 、 删 除数 据 等 。 


22.3.1 ” JavaScript 连接 数据 库 


在 进行 连接 数据 库 操作 前 ， 用 户 需要 将 SQL 文件 websites.sql 导入 你 的 MySQL 数据 库 中 。 这 里 连接 的 
MySQL 用 户 名 为 root， 密 码 为 123456， 数 据 库 为 test， 不 过 ， 这 可 以 根据 自己 的 配置 情况 进行 修改 。 连 接 
数据 库 的 具体 代码 如 下 : 


var mysql= require('mysql'); 
var connection = mysql.createConnection({ 
host : 'localhost', 
user : 'root', 
password : '123456', 
database : 'test' 
Ds; 
connection.connect (); 
connection.query('SELECT 1 + 1 RS solution', function (error, results, fields) { 
if (error) throw error; 
console.log('The solution is: ', results[0].solution); 
]) 


执行 上 述 代 码 ， 输 出 的 结果 为 : 
$ node test.js 
The solution is: 2 


22.3.2 ”查询 数据 库 数据 
查询 数据 的 具体 代码 如 下 : 


var mysql = require('mysql'); 


var connection = mysql.createConnection ({ 
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执行 上 述 代码 ， 输 出 的 结果 为 : 
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22.3.3 ”插入 数据 库 数据 
可 以 向 数据 表 中 插入 数据 ， 具 体 代码 如 下 : 


执行 上 述 代码 ， 输 出 的 结果 为 ， 


22.3.4 ”更 新 数据 库 数据 
也 可 以 对 数据 库 中 的 数据 进行 修改 与 更 新 ， 具 体 代码 如 下 : 
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2 
Var modsql = "UPDATE websites SET name = ?3,url = ? WHERE Id = ?2'; 
var modsqlParams = [' 莱 鸟 移动 站 '，'https://m.runoob.com',6]; 
// 改 
connection.query (modsql, modsqlParams, function (err, result) { 
if(err){ 
console.1log(' [UPDATE ERROR] - ',err.message); 
return; 
console.109('—————————-—----- 一 -一 UPDATE—————————————-—-—-—--- 一 一 Oh 
console.10g('UPDATE affectedRows', result.affectedRows); 
console .109( 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 \n\n'); 


Ds; 
connection.end(); 


执行 上 述 代 码 ， 输 出 的 结果 为 : 


22.3.5 ”删除 数据 库 数据 
删除 数据 之 前 ， 需 要 设置 数据 的 这 数 ， 这 里 来 删除 id 为 6 的 数据 ， 具 体 代 码 如 下 : 


var mysql = require('mysql'); 


var connection = mysql.createConnection({ 


host : "localhost'， 
user : "root' 
password : '123456', 
port: '3306', 


database: 'test', 


Ds; 
connection.connect (); 


var delsql = 'DELETE FROM websites where id=6'; 
// 删 
connection.query (delsql, function (err, result) { 
if (err){ 
console.1og('[DELETE ERROR] - ',err.message); 
return; 


console.1o0g(' 

console.10g('DELETE affectedRows', result.affectedRows); 

console.109( -一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 一 \n\n'); 
Ds 


connection.end(); 


执行 上 述 代码 ， 输 出 的 结果 为 : 


22.4 制作 网 页 版 时 钟 


使 用 JavaScript 的 技术 和 HTML 5 中 新 增 的 画布 canvas 可 以 轻松 制作 网 页 版 时 钟 特效 。 在 画布 上 绘制 
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时 钟 ， 需 要 绘制 表盘 、 时 针 、 分 针 、 秒 针 和 中 心 圆 等 图 形 ， 然 后 将 这 几 个 图 形 组 合 起 来 ， 构 成 一 个 时 针 界 
面 ， 最 后 使 用 JS 代码 ， 根 据 时间 确 定 秒针 、 分 针 和 时 针 。 具 体 步 又 如 下 ， 
步骤 1: 创建 HTML 页 面 。 


相关 的 代码 实例 请 参考 制作 网 页 版 时 钟 .html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 
22-1 所 示 。 


图 22-1 程序 运行 结果 
步骤 2: 添加 JavaScript， 绘 制 时 钟 特效 。 
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} 

</script> 

相关 的 代码 实例 请 参考 制作 网 页 版 时 钟 .html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 
22-2 所 示 ， 可 以 看 到 页 面 中 出 现 了 一 个 时 钟 ， 其 秒针 在 不 停 地 移动 。 

司 cNuseraqareupoeP- FT 
四 生日 ” 瑟 丰 MK 看 < 内 工具。 天 动 是 


图 22-2 程序 运行 结果 


22.5 就业 面试 技巧 与 解析 


22.5.1 面试 技巧 与 解析 〈 一 ) 


面试 官 : 你 认为 面试 中 ， 最 重要 的 是 什么 ? 

应 聘 者 : 我 认为 面试 中 最 重要 的 就 是 守 时 。 守 时 是 职业 道德 的 一 个 基本 要 求 ， 提 前 10~15 分 钟 到 达 面 
试 地 点 ， 可 熟悉 一 下 环境 ， 稳 定 一 下 心神 。 提 前 半 小 时 以 上 会 被 面试 官 认为 没有 时 间 观 念 ， 而 面试 时 迟到 
或 是 匆匆 忙 忙 赶 到 更 是 致命 的 ， 这 会 被 面试 官 认为 应 聘 者 缺乏 自我 管理 和 约束 能 力 ， 即 缺乏 职业 能 力 。 不 
管 什么 理由 ， 迟 到 会 影响 自身 的 形象 ， 这 是 一 个 对 人 、 对 自己 尊重 的 问题 。 


22.5.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 在 面试 的 过 程 中 ， 如 果 有 人 给 你 打 电 话 ， 你 该 怎么 办 ? 
应 聘 者 : 对 于 我 个 人 来 说 ， 这 种 情况 是 不 可 能 出 现 的 ， 我 会 在 进入 面试 前 ， 把 手机 关机 或 调 成 静音 ， 
这 是 对 面试 官 的 尊重 ， 也 会 避免 面试 时 造成 乾 粉 局 面 。 
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二 > 学 习 指引 


为 提高 JavaScript 的 安全 性 ，JavaScript 为 用 户 提供 了 多 种 方法 ， 例 如 ， 从 JavaScript 本 身 角 度 考虑 ， 
设置 了 同 源 策略 ， 即 不 允许 用 户 从 同 源 的 窗口 进行 相互 访问 ; 从 浏览 器 角度 考虑 ， 设 置 了 一 套 结构 化 安全 
规则 。 本 章 介绍 JavaScript 的 安全 策略 。 


”重点 导读 


。 了 解 安全 策略 的 类 别 。 

。 掌 握 使 用 Internet Explorer 安全 区 域 的 方法 。 
。 掌 握 JavaScript 常用 安全 策略 代码 的 应 用 。 

。 掌 握 JavaScript 加 密 和 解密 的 方法 。 


23.1 安全 策略 


在 JavaScript 中 ， 同 源 策 略 是 JavaScript 的 主要 安全 策略 之 一 ， 本 节 就 来 学 习 JavaScript 中 的 安全 策略 。 


23.1.1 JavaScript 的 同 源 策略 


回 

同 源 策略 是 JavaScript 的 重要 安全 度量 标准 , 它 可 以 防止 从 一 个 站 点 载 入 的 脚本 获取 或 设置 另 一 个 站 点 
的 文档 的 属性 。 例 如 在 一 个 浏览 器 中 ， 打 开 一 个 银行 网 站 和 一 个 恶意 网 站 ， 如 果 没有 同 源 策略 ， 这 个 恶意 
网 站 就 有 可 能 获取 另 一 个 浏览 器 窗口 中 的 银行 信息 ， 这 是 很 危险 的 。 那 么 如 何 判断 两 个 URL 是 否 属于 同一 
个 源 呢 ? 下 面 给 出 三 个 条 件 。 

协议 相同 

端口 相 

域名 相 

当 两 个 URL 以 上 3 个 条 件 都 满足 时 ， 才 属于 同一 源 ， 才 能 进行 相互 访问 ， 如 果 这 3 个 条 件 中 有 任何 一 
个 条 件 不 满足 ， 就 不 允许 两 个 脚本 进行 交互 ， 可 以 认为 这 两 个 URL 不 同 源 。 
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可 可 
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另外 ， 针 对 浏览 器 的 同 源 策略 ， 它 限制 了 来 自 不 同 源 的 脚本 信息 ， 在 浏览 器 中 ，<script>、<img>、 
<iframe>、<link> 等 标签 都 可 以 加 载 跨 域 资源 ， 同 源 策略 只 对 网 页 的 HTML 文档 做 了 限制 ， 对 加 载 的 其 他 
静态 资源 如 JavaScript、css、 图 片 等 仍然 认为 属于 同 源 。 


; 23.1.2 ”实现 跨 域 请 求 的 方法 


有 时 候 在 自己 的 网 站 需要 去 别人 的 网 站 请 求 数据 ， 这 个 时 候 就 需要 跨 域 正常 请 求 。 能 够 实现 跨 域 请 求 
的 方法 有 多 种 ， 下 面 介 绍 几 种 常用 的 方法 。 


1. 跨 域 资源 共享 CORS) 
很 多 天 气 、IP 地 址 查询 的 网 站 就 采用 


了 这 样 的 方法 ， 人 允许 其 他 网 站 对 其 请 求 数据 ， 例 如 卫 location， 


可 以 在 自己 网 站 的 JavaScript 代码 里 面向 它 发 一 个 get 请 求 ， 具 体 代码 如 下 : 


var url = "https://ipinfo.io/54.16 
document .cookie = "version=1;"; 
S$-ajax({ url: url }) 


运行 该 段 后 ， 就 会 返回 ip 地 址 信息 ， 


9.237.109/json?token=iplocation.net"; 


同时 不 会 被 浏览 器 拦截 。 在 浏览 器 的 调试 工具 窗口 中 可 以 发 现 头 


部 添加 了 一 个 字段 ，Access-Control-Allow-Origin， 这 个 字段 就 是 所 谓 的 资源 共享 了 ， 它 的 值 表示 人 允许 任意 
网 站 向 这 个 接口 请 求 数据 ， 也 可 以 设置 成 指定 的 域名 ， 如 : 
response.writeHead(200, { "Access-Control-Allow-Origin": "http://yoursite.com"}); 


添加 指定 域名 后 ， 只 有 http://yoursite.com 能 够 正常 地 进行 跨 域 请 求 ， 其 他 则 不 能 。 


2. JSONP 方法 


JSONP 方法 的 原理 是 客户 端 告诉 服务 一 个 回调 函数 的 名 称 , 服务 在 返回 的 <scritp> </scritp> 里 面 调用 这 
个 回调 函数 ， 同 时 传 进 客户 端 需要 的 数据 ， 这 样 返回 的 代码 就 在 浏览 器 上 执行 了 。 

例如 800 端口 要 向 900 端口 请 求 数据 ， 在 800 端口 的 页 面 文件 中 定义 一 个 回调 函数 writeDate， 将 
writeDate 写 在 script 的 src 的 参数 里 ， 这 个 script 标签 向 900 端口 发 出 请 求 ， 具 体 代码 如 下 : 


<script> 

function writeDate( date){ 
document .write( date); 

} 

</script> 

<script src="http://192.168.0.103: 


900/getDate?callback=writeDate"></script> 


服务 端 返回 一 个 脚本 ， 在 这 个 脚本 里 面 执 行 writeDate 函数 ， 具 体 代 码 如 下 : 


function getDate (response, callbac) 


Kk) { 


response.writeHead(200, {"Content-Type": "text/javascript"}); 


Var data = "2016-2-19"; 
response.end(callback + "('"+ 
} 


BE 


浏览 器 就 执行 了 这 个 script 片段 ， 就 会 实现 跨 域 效果 。JSONP 方法 和 CORS 方法 相 比 较 ， 缺 点 是 只 支 


持 get 类 型 ， 无 法 支持 post 等 其 他 类 型 ，T 
3. 子 域 跨 父 域 


而 且 必 须 完全 信任 提供 服务 的 第 三 方 ， 优 点 是 兼容 性 较 好 。 


子 域 跨 父 域 是 支持 的 , 但 是 需要 显 式 将 子 域 的 域名 改 成 父 域 的 , 例如 mail.mysite.com 要 请 求 mysite.com 
的 数据 ， 那 么 在 mail.mysite.com 脚本 里 需要 执行 如 下 代码 段 : 


document .domain = "mysite.com" 
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这 样 ， 这 两 个 文档 中 的 脚本 就 可 以 进行 交互 ， 且 不 受 同 源 策略 的 约束 。 默 认 情 况 下 ，domain 属性 存放 
的 是 装载 文档 的 服务 器 的 主机 名 ， 设 置 这 一 属性 时 ， 需 要 使 用 有 效 的 字符 串 ， 在 字符 串 中 最 少 需要 拥有 一 


个 点 符号 (%.”)。 


23.1.3 ”规避 浏览 器 安全 漏洞 

在 计算 机 领域 ， 几 乎 每 一 款 产品 都 存在 这 样 或 那样 的 安全 漏洞 ， 浏 览 器 也 不 例外 。 浏 览 器 漏洞 存在 是 
于 编程 人 员 的 能 力 、 经 验 和 当时 安全 技术 所 限 ， 在 程序 中 难免 全 有 不 足 之 处 。 那 么 在 使 用 浏览 器 编写 与 
调试 JavaScript 代码 的 过 程 中 ， 应 尽量 规避 浏览 器 的 安全 漏洞。 
针对 浏览 器 的 安全 漏洞 ， 用 户 可 以 使 用 浏览 器 修复 安全 工具 来 及 时 修复 ， 常 用 的 浏览 器 安全 工具 有 正 
浏览 器 修复 专家 、IE 修复 大 师 等。 


23.1.4 ”建立 数据 安全 模型 


数据 是 描述 事物 的 符号 记录 ， 模 型 是 现实 世界 的 抽象 ， 数 据 模型 是 数据 特征 的 抽象 。 那 么 优秀 安全 的 “ 
数据 模型 应 该 是 怎么 样 的 呢 ， 优 秀 安全 的 数据 模型 应 该 满足 以 下 4 个 基本 要 求 。 

能 够 比较 真实 地 模拟 现实 事物 。 

容易 为 人 所 理解 。 

便于 在 计算 机 上 实现 。 

具有 高 度 安全 的 逻辑 结构 。 


23.1.5 ”结构 化 安全 规则 


一 些 浏 览 器 为 用 户 提 供 了 结构 化 安全 规则 ， 如 Mozilla Firefox 浏览 器 ， 该 浏览 器 提供 了 先进 的 安全 规 
则 设置 ， 用 户 可 以 将 已 命名 的 规则 应 用 于 Web 站 点 列表 。 例 如 ， 可 以 创建 一 个 名 为 Internet 的 规则 ， 并 将 
其 应 用 于 公司 内 部 站 点 中 的 页 面 ， 可 以 创建 一 个 包含 Web 站 点 列表 的 名 为 “受信 站 点 ”的 规则 。 用 于 对 列 
表 中 的 站 点 赋予 某 些 特殊 权限 , 对 于 不 属于 这 个 列表 的 站 点 , 将 使 用 默认 的 安全 规则 。 如 下 图 所 示 为 Mozilla 
Firefox 浏览 器 的 安全 规则 设置 界面 ， 如 图 23-1 所 示 。 


Nap/ se 


图 23-1 Mozilla Firefox 浏览 器 的 安全 规则 设置 界面 
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23.2 ”使 用 Internet Explorer 安全 区 域 


JavaScript 的 安全 问题 并 不 限于 运行 时 的 错误 ， 在 不 违反 安全 规则 的 情况 下 ， 脚 本 也 可 以 通过 很 多 途径 
来 危害 用 户 的 运行 环境 ， 本 节 就 来 介绍 如 何 使 用 Internet Explorer 安全 区 域 。 


23.2.1 Internet Explorer 安全 区 域 


正 浏览 器 支持 对 不 同 站 点 设置 类 似 的 安全 规则 ， 为 此 ， 正 浏览 器 从 4.0 版 本 以 后 为 用 户 提供 了 4 个 安 
区 域 ， 在 正 浏览 器 窗口 中 选择 “工具 ”一 “Intemet 选项 ”菜单 命令 ， 即 可 打开 “Intemet 选项 ”对 话 框 ， 
选择 “安全 ”选项 卡 ， 在 其 中 可 以 看 到 为 用 户 提供 的 4 个 安全 区 域 ， 下 面 分 别 进行 介绍 。 

1. Internet 区 域 
该 区 域 包括 所 有 Web 上 的 网 站 ， 默 认 安 全 级 别 为 “中 ” 如 图 23-2 所 示 。 
2. 本 地 Internet 区 域 
该 


该 区 域 包括 所 有 本 地 服务 器 上 的 网 站 ， 默 认 安 全 级 别 为 “中 低 ” 如 图 23-3 所 示 。 


rieret 


邮 


mR 


Dd] 


ra a 
RR 


Ea 


日 各 必 名 


| ee EA 
3 


net 


asm ee ts, 


EM 
中 击 
-于 大风 这 
的 和 不 妆 有 和 2 二 
Te 地 伯 


[lil 
ne Bionengy 


sevaac， [Sm 


图 23-2 “Internet 选项 ”对 话 框 图 23-3 本 地 Internet 区 域 


3. 受信 任 的 站 点 区 域 


人 允许 访问 的 安全 站 点 。 如 果 用 户 将 一 个 网 站 添加 到 “受信 任 的 站 点 ”区 域 ， 则 表明 该 网 站 下 载 或 运行 
的 文件 不 会 损坏 用 户 的 计算 机 或 数据 。 在 默认 情况 下 ， 没 有 任何 网 站 被 分 配 到 “受信 任 的 站 点 ”区 域 ， 其 
安全 级 别 设置 为 “ 低 ”。 


4. 受 限制 的 站 点 区 域 


明确 指出 不 受信 任 的 站 点 。 如 果 用 户 将 某 个 网 站 添加 到 “ 受 限制 的 站 点 ”区 域 ， 则 表明 该 网 站 下 载 或 
运行 的 文件 可 能 会 损坏 当前 的 计算 机 或 数据 。 在 默认 情况 下 ， 没 有 任何 网 站 被 分 配 到 “ 受 限制 的 站 点 ” 


区 
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域 ， 其 安全 级 别 设置 为 “高 ”。 
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图 23-4 受信 任 的 站 点 区 域 图 23-5 受 限制 的 站 点 区 域 


23.2.2 ”浏览 器 使 用 JavaScript 的 安全 问题 


回 
由 于 系统 资源 有 限 ， 因 此 ， 不 管 是 有 意 设计 ， 还 是 意外 差错 ， 都 很 容易 写 出 使 浏览 器 崩溃 的 JavaScript 
代码 。 运 行 下 面 几 个 例子 中 的 任何 一 段 代码 ， 都 可 能 造成 浏览 器 甚至 操作 系统 崩溃 。 


1. 无 线 循环 


下 面 给 出 一 段 代码 ， 这 段 代码 会 造成 死 循环 ， 当 退出 循环 的 条 件 永远 不 成 立时 ， 这 个 循环 将 会 被 称 为 
死 循 环 ， 死 循环 会 造成 系统 资源 慢 慢 地 被 浪费 掉 ， 使 系统 变 得 缓慢 或 崩溃 。 

<script> 

while (true); 

</script> 


2. 内 存 消耗 

内 存 消 耗 列 尽 会 使 浏览 器 崩溃 ， 下 面 给 出 一 段 代码 ， 会 在 死 循 环 中 使 字符 串 不 断 地 增长 ， 系 统 会 在 几 
秒 钟 内 造成 参 溃 。 

<script> 

var str="hello, Javascript"; 

while (true); 


strt=str; 
</script> 


3. 使 用 浏览 器 方法 


使 用 浏览 器 方法 的 函数 进行 自我 调用 ， 会 无 休止 地 循环 存 取 文档 ， 造 成 浏览 器 过 于 繁忙 而 无 法 载 入 显 
示 用 户 界面 事件 ， 从 而 无 法 完成 相应 的 动作 。 


<script> 


501 


ZE 


/ 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实 中 ( 超 信 版 ) 


Sg 


function danger() 

{ 
alert ("hello!"); 
danger (); 

} 

danger (); 

</script> 


23.3 JavaScript 常用 安全 策略 代码 


在 使 用 JavaScript 进行 开发 程序 时 ， 可 以 使 用 JavaScript 的 部 分 属性 或 方法 来 提高 安全 性 ， 下 面 介 绍 
JavaScript 常用 安全 策略 代码 。 


通过 使 用 JavaScript 脚本 中 的 Event 对 象 的 相关 属性 可 以 屏蔽 网 页 中 的 部 分 按键 ， 从 而 保护 网 页 安全 。 
其 中 keyCode 属性 表示 按 下 按键 的 数字 代号 ， 下 面 将 常用 的 keyCode 属性 值 以 表格 的 形式 列 出 ， 如 表 23-1 


所 示 。 
表 23-1 KeyCode 属性 值 
值 描 述 
8 退 格 键 
13 回 车 键 
116 F5 刷新 键 
37 Alt+ 方 向 键 二 或 方向 键 一 
78 CHN 快捷 键 新 建 正 窗口 
121 Shift+F10 快捷 键 
46 删除 键 


【 例 23-1】 实例 文件 ，ch23\Chap23.1.html》 屏 项 部 分 按键 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 屏 蔽 部 分 按键 </title> 
<script language=javascript> 
function keydown (){ 
if (event.keyCode==8)1{ 
event .keyCode=0; 
eVent .returnValue=false; 
alert (" 当 前 设置 不 允许 使 用 退 格 键 ") 7 
Jif (event .keycode==13) { 
event .keyCode=0; 
event .returnValue=false; 


alert ("当前 设置 不 允许 使 用 回 车 键 ") 7 
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}if (event.keycode==116) { 
event .keyCode= 


event .returnValue=false; 
alert ("当前 设置 不 允许 使 用 F5 刷新 键 ") ; 
}if((event.altKey) &g ( (window.event .keycode==37) | | (window.event .keycode==39))){ 
event .returnValue=false; 
alert ("当前 设置 不 允许 使 用 Rlt+ 方 向 键 (- 或 方向 键 一 ") ; 
Jif((event.shiftKey) && (event .keyCcode==121)) { 
event .returnValue=false; 
alert ("当前 设置 不 允许 使 用 shift+F10"); 
j 
} 
</script> 
</head> 
<body onkeydown="keydown () "> 
<img src="01.jpg" > 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap23.1.html 文件 , 在 正 浏览 器 里 面 运行 ， 这 时 按 下 Enter 键 , 页 面 会 给 出 相 
应 的 提示 信息 ， 如 图 23-6 所 示 。 
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图 23-6 程序 运行 结果 1 


23.3.2 ”屏蔽 鼠标 右键 


用 户 在 浏览 网 站 时 ， 可 以 利用 鼠标 右键 菜单 进行 一 些 快捷 操作 ， 如 查看 网 页 源 文 件 、 图 片 另存 为 等 ， 
但 是 某 些 网 站 并 不 想 让 用 户 执行 这 些 操作 , 这 时 就 需要 屏蔽 鼠标 的 右键 操作 。 使 用 JavaScript 中 的 鼠标 事件 
可 以 屏蔽 鼠标 右键 。 

【 例 23-2】 实例 文件 ，ch23\Chap23.2.html) 屏蔽 鼠标 右键 。 


<!DocTYPE html> 
<head> 
<title> 屏 项 鼠标 右键 </title> 
<script language=javascript> 
function click() { 

event .returnvalue=false; 

alert ("当前 设置 不 允许 使 用 右键 ! "); 
} 
document .oncontextmenu=click; 
</script> 
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</head> 
<body > 

<img src="01.jpg" > 
</body> 

</html> 


相关 的 代码 实例 请 参考 Chap23.2.html 文件 ， 在 正 浏览 器 里 面 运行 ， 这 时 右 击 鼠 标 ， 页 面 会 给 出 相应 
的 提示 信息 ， 提 示 用 户 不 允许 使 用 右键 菜单 ， 如 图 23-7 所 示 。 
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23-7 ”程序 运行 结果 2 


23.3.3 ”禁止 网 页 另存 为 


有 些 网 站 只 对 用 户 提 供 浏览 功能 ， 而 不 能 进行 下 载 或 将 网 页 另存 为 。 使 用 JavaScript 脚本 中 的 noscript 
标记 可 以 防止 网 页 被 另存 为 。 
【 例 23-3】 (实例 文件 ， ch23\Chap23.3.html) 禁止 网 页 被 另存 为 。 


<!DocTYPE html> 
<head> 

<title> 禁 止 网 页 另存 为 </title> 
</head> 

<body> 

<a href=""> 欢 迎 光临 我 的 站 点 </a><hr> 
<noscript> 

<iframe scr="*.htm"></iframe> 
</noscript> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap23.3.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 23-8 所 示 。 


Sy 口 x 
司 CAUsers\qiangu\Dcc DD - | 夸 汪 上 FEIS 产 为 
| 
葡 逮 光 虐 各 的 站 点 


各 100%6 
图 23-8 程序 运行 结果 3 
选择 “文件 ”一 “另存 为 ”菜单 命令 ， 打 开 “ 另 存 为 ”对 话 框 ， 然 后 单 击 “确定 ”按钮 ， 将 弹出 一 个 
提示 对 话 框 ， 显 示 “ 无 法 保存 此 网 页 ” 如 图 23-9 所 示 。 
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保存 网 页 时 出 错 x 


图 23-9 ”提示 对 话 框 


23.3.4 禁止 复制 网 页 内 容 


在 浏览 网 页 时 ， 有 些 网 页 中 的 信息 只 供用 户 浏览 ， 不 允许 进行 复制 或 粘贴 操作 。 使 用 <body> 中 的 相关 
事件 可 以 禁止 用 户 复制 网 页 中 的 信息 。 

【 例 23-4】 (实例 文件 ，ch23\Chap23.4.html) 禁止 复制 网 页 内 容 。 

<!DOCTYPE html> 

<head> 

<title> 禁 止 复制 网 页 内 容 </title> 

</head> 

<body> 

<a href=""> 欢 迎 光临 我 的 站 点 </a><hr> 

<body oncopy="alert (' 对 不 起 , 禁止 复制 ! ') ;return false;"> 

</body> 

</html> 

相关 的 代码 实例 请 参考 Chap23.4.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 23-10 所 示 。 

选中 网 页 中 的 信息 ， 然 后 按 下 CtrltC 快捷 键 进行 复制 操作 ， 这 时 会 弹出 相应 的 提示 信息 ， 如 图 23-11 
所 示 。 


- 0O x 
站 cAUsers\qiangu\Doc ”大 可 上 网 克 5S 存 为 
文件 (有 和 名 (E) 查看 V) 收藏 闪 (A) 工具 [天助 (H) 来 和 网 下 洛 x 
欢迎 光临 我 的 站 点 
息 对 所 要 上 各 抽 1 
巧 100% ~ 
图 23-10 程序 运行 结果 4 图 23-11 提示 信息 框 


23.4 JavaScript 加 密 与 解密 


对 JavaScript 进行 加 密 与 解密 操作 ， 可 以 保护 JavaScript 的 代码 安全 ， 从 而 增 大 复制 者 的 难度 。 使 用 
JavaScript 中 的 escape0 和 unescape0 函 数 可 以 进行 加 密 与 解密 操作 。 


23.4.1 JavaScript 代码 加 密 


escape0 函 数 可 对 字符 串 进行 编码 ， 这 样 就 可 以 在 所 有 的 计算 机 上 读 取 该 字符 串 ， 输出 的 结果 是 加 密 后 ~ 
的 代码 。 
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【 例 23-5】 (实例 文件 ，ch23\Chap23.5html) JavaScript 代码 加 密 。 


<!DOCTYPE html> 

<html> 

<head> 

<title>Javascript 代码 加 密 </title> 
</head> 

<body> 

<script> 
document .write (escape ("Hello Javascript!I love you!!")); 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap23.5.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 23-12 所 示 。 


二 日 
(Dawns 5 - o| Bioscipreme 
文件 旧病 号 EE) ”至 看 (V) 收藏 夫 (A) 工具 (T) 。 帮 有 动 IH) 
Hello%20JavaScripth21I%201ove%20you%21%21 


蕊 100% 


图 23-12 程序 运行 结果 5 


23.4.2 ”JavaScript 代码 解密 


使 用 escape0 函 数 加 密 后 的 代码 是 不 能 直接 运行 的 ， 必 须 使 用 unescape0 函 数 对 加 密 后 的 代码 进行 解密 
操作 。 
【 例 23-6】 实例 文件 ，ch23\Chap23.6.html〉JavaScript 代码 解密 。 


<!DocTYPE html> 

<html> 

<head> 

<title>dJavaScript 代码 解密 </title> 
</head> 

<body> 

<script> 

var str="Hello JavaScript!I love you!!™"; 
var str esc=escape (str); 

document .write (str esc + "<br>") 
document .write (unescape (str_esc)) 
</script> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap23.6.html 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 23-13 所 示 。 


-0 x 
@ 间 CWenWierouDoc D - © | lveacerieettite 
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Hello JavaScript!I love you!! 


R100% 


图 23-13 程序 运行 结果 6 
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23.5 ”禁止 新 建 IE 窗口 


加 
有 时 需要 使 用 CtrlHN 快捷 键 新 建 正 窗口 ， 以 方便 浏览 页 面 ， 不 过 有 时 也 需要 禁止 新 建 正 窗口 ， 使 用 
JavaScript 代码 ， 可 以 轻松 实现 禁止 新 建 正 窗口 的 操作 。 
【 例 23-7】 (实例 文件 ，ch23\Chap23.7html) 禁止 新 建 正 窗口 。 


<!DOCTYPE HTML> 
<html> 
<head> 
<title> 禁 止 新 建 IE 窗 D</title> 
<script language=javascript> 
function keydown (){ 
if((event-ctrlKey) &s (event .keycode==78)) { 
event .returnValue=false; 
alert ("当前 设置 不 允许 使 用 Ctrltn 新 建 IE 窗口 ") 7 
} 
} 
</script> 
</head> 
<body onkeydown="keydown () "> 
<img src="01.jpg" > 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap23.7.html 文件 ， 在 正 浏览 器 里 面 ， 然 后 按 下 CtrlHN 快捷 键 ， 即 可 弹出 一 
个 信息 提示 框 ， 提 示 用 户 当前 不 允许 使 用 CtrlHN 快捷 键 新 建 正 窗口 ， 运 行 结果 如 图 23-14 所 示 。 


司 chusersqiangupoc P - 上 | 等 下 ti 时 EEC 
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在 3 不 二 要 有 Cl+n 新 玉宇 中 


图 23-14 ”程序 运行 结果 7 


23.6 ”就 业 面试 技巧 与 解析 


23.6.1 ”面试 技巧 与 解析 (一) 


面试 官 : 假如 你 晚上 要 去 送 一 个 出 国 的 同学 去 机 场 ， 可 单位 临时 有 事 非 你 办 不 可 ， 你 怎么 办 ? 

应 聘 者 : 我 觉得 工作 是 第 一 位 的 ， 但 朋友 间 的 情谊 也 是 很 重要 的 ， 这 个 问题 我 觉得 要 根据 当时 具体 的 
情况 来 决定 。@D 如 果 我 的 朋友 晚上 9 点 的 飞机 ， 而 我 的 加 班 8 点 就 能 够 完成 ， 那 就 最 理想 了 ， 干 完工 作 去 
机 场 ， 皆 大 欢喜 。@ 如 果 说 工作 不 是 很 紧急 ， 加 班 仅仅 是 为 了 明天 上 班 的 时 候 能 把 报告 交 到 办 公 室 ， 那 完 
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全 可 以 跟 领导 打 声 招呼 ， 先 去 机 场 然 后 回来 加 班 ， 晚 点 睡 就 是 了 。 人 @@ 如 果 工作 很 紧急 ， 两 者 不 可 能 兼顾 的 
情况 下 ， 我 觉得 可 以 有 两 种 选择 ， 一 种 情况 是 如 果 不 是 全 单位 都 加 班 ， 是 不 是 可 以 要 其 他 同事 来 代替 一 下 
工作 ， 自 己 去 机 场 ， 哪 怕 就 是 代替 你 离开 的 那 一 会 儿 。 另 一 种 情况 是 如 果 连 这 一 点 都 做 不 到 ， 那 只 好 忠义 
不 能 两 全 了 ， 打 电话 给 朋友 解释 一 下 ， 相 信 他 会 理解 ， 毕 竟 工 作 做 完了 就 完了 ， 朋 友 还 是 可 以 再 见面 的 。 


23.6.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 为 什么 我 们 要 在 众多 的 面试 者 中 选择 你 ? 
应 聘 者 : 根据 我 对 贵 公司 的 了 解 ， 以 及 我 在 这 份 工作 上 所 累积 的 专业 、 经 验 及 人 脉 ， 相 信 正 是 贵 公司 
所 找寻 的 人 才 。 而 我 在 工作 态度 上 ， 也 有 圆 融 、 成 熟 的 一 面 ， 相 信 可 以 和 主管 、 同 事 都 能 合作 愉快 。 
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第 24 章 
JavaScript 中 的 错误 和 异常 处 理 


JavaScript 是 一 种 编译 语言 ， 在 使 用 的 过 程 中 ， 总 会 出 现 一 些 令 人 困惑 的 错误 信息 ， 为 了 避免 类 似 的 问 
题 ， 从 JavaScript 3.0 版 本 以 后 ， 就 添加 了 异常 处 理 机 制 。 用 户 可 以 采用 从 Java 语言 中 移植 过 来 的 模型 ， 使 
用 ty…catch 等 关键 字 处 理 代码 中 的 异常 ， 也 可 以 使 用 onerror 事件 处 理 异常 的 产生 。 本 章 介绍 JavaScript 
中 的 错误 与 异常 处 理 ， 以 及 如 何 优化 JavaScript 代码 。 


二 ”重点 导读 


。 了 解 JavaScript 常见 的 错误 和 异常 。 
。 掌 握 常 见 错误 和 异常 处 理 的 方法 。 
。 掌 握 使 用 浏览 器 调试 器 的 方法 。 

。 掌 握 JavaScript 优化 的 方法 。 


24.1 常见 的 错误 和 异常 


错误 和 异常 是 编写 程序 中 经 常 出 现 的 问题 ， 一 般 来 讲 ， 错 误 在 编译 的 时 候 就 可 以 发 现 ， 而 异常 是 在 执 
行 过 程 中 发 生 的 意外 , 通常 是 由 潜在 的 错误 概率 导致 的 。 本 节 就 来 介绍 在 编写 JavaScript 程序 时 常见 的 一 些 


错误 和 异常 。 


24.1.1 ”拼写 错误 


拼写 错误 是 编码 人 员 非 常 容易 也 经 常 犯 的 错误 ， 例 如 编写 代码 时 容易 把 getElementById() 写成 


getElementByIDO0， 这 种 错误 比较 不 容易 发 现 。 
出 现 这 种 错误 时 一 定 要 耐心 地 去 检查 。 


此 ， 避 免 这 种 错误 就 需要 开发 者 在 编码 时 非常 细心 ， 并 


且 


另外 ， 还 有 一 些 大 小 写 的 问题 ， 也 一 定 要 注意 ， 例 如 将 让 写成 了 If， 将 Array 写成 了 array， 这 些 都 会 


导致 语法 错误 。 
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渴 24.1.2 ”访问 不 存在 的 变量 


在 JavaScript 中 , 通常 变量 都 需要 先 声 明 再 使 用 ,并且 声明 变量 时 需要 指定 变量 的 类 型 ， 且 需要 在 变量 
前 使 用 关键 字 var。 不 过 ， 因 为 JavaScript 对 变量 类 型 的 约束 比较 弱 ， 所 以 它 也 允许 省 略 关键 字 直接 定义 变 
量 ， 但 是 ， 在 实际 操作 的 过 程 中 ， 不 提倡 这 样 做 ， 因 为 这 种 做 法 会 在 无 形 中 给 错误 检查 增加 麻烦 。 
另外 ， 声 明 一 个 变量 后 ， 在 引用 该 变量 时 一 定 要 注意 前 后 的 一 致 性 ， 也 就 是 说 在 引用 时 不 要 把 变量 的 
名 字 拼 写 错误 ， 从 而 导致 出 现 访问 不 存在 的 变量 这 样 的 错误 。 代 码 如 下 : 


var usrname = "天 天 "7 
document .write ("用 户 名 为 : "+username) 7 


这 样 就 会 出 现 username 变量 没有 定义 这 样 的 错误 ， 因 为 前 面 声 明 的 变量 名 是 usrname， 而 后 面 调用 的 


却 是 username。 


24.1.3 ”括号 不 匹配 


括号 不 匹配 也 是 编程 中 常 出 现 的 一 个 错误 。 经 常会 在 嵌 套 语句 比较 多 的 时 候 出 现 大 括号 “{” 和 “}” 
个 数 不 匹 配 ， 或 者 “(”，“)” 个 数 不 匹 配 ， 这 些 错误 最 容易 在 修改 或 删除 了 括号 里 面 的 代码 后 出 现 ， 所 
以 除了 要 养 成 良好 的 编程 习惯 外 , 在 输入 括号 时 先 输入 一 对 括号 然后 再 在 括号 里 书写 其 他 内 容 也 是 一 个 
好 的 方法 。 

另外 ， 编 写 代码 有 时 需要 输入 中 文字 符 ， 编 程 人 员 容 易 在 输 完 中 文字 符 后 忘记 切换 输入 法 ， 从 而 导致 
输入 的 小 括号 、 分 号 或 者 引号 等 出 现 错误 。 如 下 一 段 代 码 ， 出 现 的 括号 就 不 一 致 ， 前 面 是 英文 状态 下 的 括 
号 ， 后面 是 中 文 状态 下 的 括号 。 

alert ("用 户 名 为 : "+ user + "密码 为 : " + psw) 


站 24.1.4 字符 串 和 变量 连接 错误 


在 JavaScript 中 , 当 想 要 一 次 输出 多 个 字符 串 和 变量 时 ,需要 使 用 加 号 和 引号 来 连接 这 些 字 符 串 和 变量 。 
字符 串 和 变量 相连 时 要 注意 字符 串 需要 加 双 引号 ， 而 变量 不 需要 加 引号 。 代 码 如 下 : 


var user = document.getElementById ("txt1").text; 
var psw = document.getElementById ("txt2") .ext 
alert ("用 户 名 为 : ”+ user + "密码 为 : "+ psw); 


在 这 种 情况 下 ， 由 于 引号 、 加 号 、 冒 号 比较 多 ， 所 以 很 容易 出 错 ， 例 如 将 alert 语句 写成 : 

alert ("用 户 名 为 : "+ user + "密码 为 : + Psw) 7 

又 或 者 写成 : 

alert ("用 户 名 为 : ”+ user "密码 为 : " + psw); 

第 一 种 错误 写法 是 在 写 连 接 第 二 个 字符 串 “ 密 码 为 : ”时 少 了 后 引号 ， 第 二 种 错误 写法 是 在 第 一 个 变量 
user 连接 第 二 个 字符 串 “ 密 码 为 : ”时 没有 用 加 号 连接 。 


24.1.5 “等 号 与 赋值 混淆 
等 号 与 赋值 符号 混淆 的 错误 一 般 较 常 出 现在 让 语句 中 ， 而 且 这 种 错误 在 JavaScript 中 不 会 产生 错误 信 
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息 ， 所 以 在 查找 错误 时 往往 不 容易 被 发 现 。 例 如 : 


if(s = 0) 
alert (" 没 有 找到 相关 信息 ") 7 


上 面 的 代码 在 逻辑 上 是 没有 问题 的 ， 它 的 运行 结果 是 将 0 赋值 给 了 s， 如 果 成 功 则 弹出 对 话 框 ， 而 不 是 
对 s 和 0 进行 比较 ， 这 不 符合 开发 者 的 本 意 。 


24.2 错误 和 异常 处 理 


如 果 是 一 小 段 代码 ， 用 户 可 以 通过 仔细 检查 来 排除 错误 ,但 如 果 程 序 稍微 复杂 点 ,调试 JavaScript 就 变 
得 困难 了 。 在 JavaScript 中 ， 有 提供 一 些 能 够 帮助 编程 人 员 解 决 部 分 错误 的 方法 。 


24.2.1 用 alert(0) 和 document.write() 方 法 监视 变量 值 


在 JavaScript 调试 错误 的 方法 中 ，alert0 和 document.write 是 比较 常用 并 且 简 单 有 效 的 方法 。alert0 方 法 
在 弹出 对 话 框 显示 变量 值 的 同时 ， 会 停止 代码 的 继续 运行 ， 直 到 用 户 单 击 “ 确 定 ” 按 钮 。 一 般 如 果 要 中 断 
代码 的 运行 ， 监 视 变 量 的 值 ， 则 使 用 alert0 方 法 。 

document.write0 方 法 是 在 输出 值 后 还 会 继续 运行 代码 , 当 需 要 查看 的 值 很 多 时 , 则 使 用 document write0 
方法 ， 这 样 能 够 避免 反复 单 击 “ 确 定 ”按钮 。 如 在 下 面 的 代码 中 : 


<script type="text/javascript"> 
var a=["bag", "bad", "egg"]; 
function show(){ 
var b=new Array(""); 
for (var i=0;i<a.length;i++){ 
if(a[i] .indexof ("b") !=0){ 
b.push (a[lil); 


[plsrstlo] 


上 
于 
</script> 
上 面 的 代码 是 要 将 数组 a 中 的 以 “b” 开 头 的 字符 串 添加 到 数组 b 中 。 要 想 检 测 添加 到 数组 b 中 的 值 的 
可 以 在 让 语句 中 根据 加 入 数组 中 值 的 多 少 来 选择 alert0 语 句 或 document.write0 语 句 。 
【 例 24-1】 实例 文件 ，ch24\Chap24.1.html》 用 documentwrite() 方 法 监视 变量 值 。 


<!DOCTYPE html> 
<head> 
<title>alert 和 document .write 方法 监视 变量 值 </title> 


<script type="text/javascript"> 


话 


var a=["bag", "bird", "egg", "bit", "cake"]; 
function show(){ 
var b=new Array(""); 
for (var i=0;i<a.length;i++){ 
if(a[il] .indexof ("b")==0) 
document .write (a[i]+" "™); 
b.push (a[il]); 
[3 
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} 

</script> 

</head> 

<body> 

<input type="button" value=" 检 测 数据 "” onclick="show()"/> 


</body> 
</html> 


相关 的 代码 实例 请 参考 Chap24.1.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 24-1 
所 示 。 
单 击 “ 检 测 数据 ”按钮 ， 即 可 在 页 面 中 显示 检测 结果 ， 如 图 24-2 所 示 。 


- OO x - 0 Xx 
间 CAUsereiangu\Doe DO - 上 | @ slonfndocumentwi-。 | <】 全 CWsers\qiangu\Doc PD - © | 加 CAUsers\qiangu\Do.. 
文件 站 篇 六 (6) 二 看 V】 。 履 藉 夫 (A) 工具 MT 帮助 (H| 文件 内 六 (EF) 豆 看 WV) 收 菩 窟 0 工具 (都 助 (H) 
位 列 数据 bag bird bir 
后 100%6 ~ R100% ~ 
图 24-1 程序 运行 结果 1 图 24-2 检测 结果 


24.2.2 用 onerror 事件 找到 错误 


当 在 JavaScript 中 产生 异常 时 就 会 在 window 对 象 上 触发 onerror 事件 ， 如 果 需 要 利用 onerror 事件 ， 就 
必须 创建 一 个 处 理 错误 的 函数 ， 该 处 理 函 数 提供 了 三 个 参数 来 确认 错误 信息 。 
【 例 24-2】 〈 实 例文 件 ，ch24\Chap24.2.html) 使 用 onerror 事件 处 理 错误 。 


<!DOCTYPE html> 

<head> 

<title> 使 用 onerror 事件 处 理 错误 </title> 

<script language="javascript"> 

window.onerror = function(sMessage, sUrl, sLine) { 
alert ("出 错 了 ! \n" + sMessage + "\nUrl: " + sUrl + "\n 出 错 行 ; " + sLine); 
return true;  ”// 屏 项 系统 事件 

} 

</script> 

</head> 

<body onload="aa();"> 

</body> 

</html> 


相关 的 代码 实例 请 参考 Chap24.2.html 文件 ， 然 后 双击 该 文件 ， 在 下 浏览 器 中 运行 的 结果 如 图 24-3 
所 示 。 

单 击 “ 否 ”按钮 ， 弹 出 一 个 信息 提示 框 ， 提 示 用 户 出 错 了 ! 如 图 24-4 所 示 。 从 代码 中 可 以 看 到 ，body 
的 onload 事件 调用 了 一 个 未 声明 的 方法 aa0， 导 致 页 面 出 现 错误 ， 从 而 会 触发 onerror 事件 显示 出 错误 
信息 。 
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[3 x 
© 天 于 下 

测试 此 页 面 ， 则 单 二 否 -. 

厂 不 王 呈 示 此 消息 (D) 

反 全 用 Inte orer 的 内 时 名 本 于 


机 周斌 印记 垃 后 网 页 的 湛 息 x 
EN) 
区“ 到 | 大 到 | 7 
“aa" 二 定义 
FD] Ur : fley//C/Users/qiangu/Documerts/ 尖 /Chap18.2html 
省 溪 “aa" 直 主义 511 


图 24-3 程序 运行 结果 2 图 24-4 显示 出 错 信息 


24.2.3 用 try…catch 语句 找到 错误 、 处 理 异常 


在 JavaScript 中 ，try…catch 语句 可 以 用 来 捕获 程序 中 某 个 代码 块 中 的 错误 ， 同 时 不 影响 代码 的 运行 。 
该 语句 首先 运行 ry 里 面 的 代码 ， 代 码 中 任何 一 个 语句 发 生 异 常 try 代码 块 就 结束 运行 ， 此 时 catch 代码 块 
开始 运行 ， 如 果 最 后 还 有 finally 语句 块 ， 那 么 无 论 try 代码 块 是 否 有 异常 ， 该 代码 块 都 会 被 执行 。 该 语句 
的 语法 如 下 : 


try { 
trystatements 

} 

catch (exception) { 
catchstatements 

} 

finally { 
finallystatements 

} 


其 中 ，catch 语句 中 的 参数 是 一 个 局 部 变量 ， 用 来 指向 Error 对 象 或 其 他 抛 出 错误 的 对 象 。 另 外 ， 在 一 个 try 
语句 块 之 后 ， 可 以 有 多 个 catch 语句 块 来 处 理 不 同 的 错误 对 象 。 
【 例 24-3】 实例 文件 ，ch24\Chap24.3.html〉 用 try…catch 语句 找到 错误 、 处 理 异 常 。 


<!DocTYPE html> 
<head> 
<title>try...catch 语句 </title> 
<script language="javascript"> 
try{ 

document .write (str); 
}catch(e){ 

var myError = ""; 


for(var i in e){ 
myError += 1 + ":" + elil] + *\n"; 
i 
alert (myError); 
} 
</script> 
</head> 
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<body> 
</body> 
</html> 


相关 的 代码 实例 请 参考 Chap24.3.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 24-5 所 
示 。 从 代码 中 可 以 看 到 ， 在 try 语句 块 中 输出 一 个 未 定义 的 变量 str， 引 发 异常 ， 从 而 运行 catch 语句 块 来 显 
示 错 误 信息 。 


来 全 网 页 的 满 息 


descriptiony str 未 定义 
number-2145823279 
staclcReferenceError “str 未 定义 
at Global code (fley//CVUsers/qiangu/Documents/ 尖 码 
/Chap18.3.htmk5:5) 


24-5 显示 出 错 信息 


24.3 ”使 用 浏览 器 调试 器 


尽管 在 JavaScript 中 ,可 以 编写 简单 的 代码 脚本 来 处 理 一 些 错误 , 但 是 对 于 复杂 的 程序 脚本 ,就 需要 借 
助 一 些 调试 工具 。 虽 然 JavaScript 没有 自 带 调试 的 功能 ， 但 是 在 Firefox 和 Intemet 浏览 器 中 ， 可 以 使 用 相 
关 的 调试 器 对 JavaScript 程序 进行 调试 。 

1. Firefox 浏览 器 调试 


在 Firefox 中 可 以 使 用 自 带 的 JavaScript 调试 器 ， 即 控制 台 ， 来 对 JavaScript 程序 进行 调试 ， 选 择 “ 工 
具 ” 一 “Web 控制 台 ” 菜 单 命令 ， 如 图 24-6 所 示 。 


上 
2 Dost 


百度 新 澳 " 
J 。 知 玫 


网 本寺 


24-6 选择 “Web 控制 台 ” 菜 单 命令 


打开 Firefox 的 控制 侣 ， 在 其 中 可 以 看 出 ， 控 制 合 中 能 够 显示 所 有 在 浏览 器 中 运行 过 的 程序 出 现 的 错误 
和 警告 ， 并 且 点 击 相应 的 错误 或 警告 链接 可 以 打开 相应 的 代码 ， 如 图 24-7 所 示 。 
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@ Xu x 山 
€ © aboutrenome 


加 录入 同好 让 广汉 三 打手 上 小 计 从 


e Qaascmf 会 自 叶 会 抽 罗 » 三 
网址 国 二 加 天 二 又)1 


Bai 必 本 


Era 拭 = 答 
ey 


5 口 E53 有 EE Ons () Res Cts ONF = BF FORSOGx 
和 RR00 ~ Ocs5~ ”多 安 全 (U9 日志) ” 昌 吴 和 至 人) Es 


图 24-7 Firefox 控制 台 


2. 360 安全 浏览 器 调试 
360 安全 浏览 器 自 带 有 开发 人 员工 具 功 能 ， 


使 用 该 功能 可 以 对 JavaScript 代码 进行 调试 ， 在 浏览 器 窗口 外 


中 选择 “打开 菜单 ”一 “工具 ”一 “开发 人 员 了 


[ 具 ” 菜 单 命令 ， 如 图 24-8 所 示 。 


打开 360 安全 浏览 器 的 调试 窗口 ， 在 其 中 可 以 对 代码 进行 调试 ， 如 图 24-9 所 示 。 


全 
保存 网 风 
祭 丰 网 为 医 片 
DW 上 这。 ctr+SHift+ Dele 
3 列 56 多 音 口 棋 式 
| ， 攻 中 
位 适 矶 /设置 i 
ET 》 | mm 
人 至 腿 S 器 》 
Internet 项 


x 
C OO ©fle//cyusers/qiangu/D 因 贡 ea 日 -三 


€ 
dsplay: elocky 


EEC 


图 24-8 选择 “开发 人 员工 具 ” 菜 单 命令 


3. Internet Explorer 浏览 器 调试 


在 正 浏 览 器 中 ， 可 以 使 用 自 带 的 调试 器 来 对 JavaScript 程序 进行 调试 。 打 开 方法 为 : 打开 正 浏览 器 ,入 
然后 选择 “Tntemet 选项 ”一 “高 级 ”选项 卡 ， 在 打开 的 列表 框 中 撤销 “禁用 脚本 调试 〈Internet Explorer)” 


复 选 框 的 选中 状态 ， 如 图 24-10 所 示 。 
例如 对 下 面 这 段 代码 进行 调试 : 


<script language="javascript"> 

window.onload=function(){ 
alert (str); 

} 

</script> 


图 24-9 360 安全 浏览 器 调试 窗口 
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可 以 看 到 程序 中 使 用 了 一 个 未 声明 的 变量 str, 在 正 浏览 器 中 运行 上 面 的 这 段 程序 ,会 弹出 一 个 对 话 框 ， 


如 图 24-11 所 示 。 


二 
ES 
npn 有 @ Es sm nn ere 
ee 
i ee 
ca Se 
i 
I | 
FOR 
CJ Ee 
图 24-11 “网 页 错误 ”对 话 框 


24-10 ”撤销 复 选 框 的 选中 状态 


在 对 话 框 中 单 击 “ 是 ”按钮 ，IE 浏览 器 的 调试 工具 就 会 指出 并 定位 错误 ， 如 图 24-12 所 示 。 


1 tscript langvagesrjavaccriptry 和 
2 vindov.cnlosc-function(){ yg F "a 


‘ctject Wincowl 
fetject Arguments)] 


5 script> 
和 Iaobaa 


Es] 
THTMLG 9 


图 24-12 ”指出 并 定位 错误 


另外 ， 在 调试 复杂 的 程序 脚本 时 ， 往 往 需 要 设置 断 点 来 发 现 解决 错误 ,在 正 浏览 器 的 调试 工具 中 可 以 
按 F9 键 来 设置 断 点 ， 并 且 还 可 以 逐 语句 、 逐 过 程 地 去 运行 调试 程序 。 
a 4. Console.log() 方 法 
和 对 于 JavaScript 程序 的 调试 ，console.log0 是 一 种 很 好 的 方式 ， 原因 在 于 consolelog0) 仅 在 控制 台中 打印 
相关 信息 ， 而 不 会 阻 断 JavaScript 程序 的 执行 ， 从 而 造成 副作用 。 
在 具备 调试 功能 的 浏览 器 上 ，window 对 象 中 会 注册 一 个 名 为 console 的 成 员 变 量 ， 指 代 调试 工具 中 的 
h 


控制 合 。 通 过 调用 该 console 对 象 的 log0 函 数 ， 可 以 在 控制 台中 打印 信息 。 例 如 ， 以 下 代码 将 在 控制 合 
打印 “Sample log”， 代码 如 下 : 
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window.console.10g ("sample 10g"); 

上 述 代码 可 以 忽略 window 对 象 而 直接 简写 为 : 

console.10g ("sample 10g"); 

consolelog0 可 以 接受 任何 字符 串 、 数 字 和 JavaScript 对 象 。 与 alert0 函 数 类 似 ，console.log0 也 可 以 接 
受 换行 符 m 以 及 制 表 符 \(t。console.log0 语 句 所 打印 的 调试 信息 可 以 在 浏览 器 的 调试 控制 台中 看 到 ， 不 同 的 
浏览 器 中 console.log(0 行 为 可 能 会 有 所 不 同 ， 下 面 给 出 一 个 具体 实例 ， 代 码 如 下 : 


<script type="text/javascript"> 

Var a=6; 

ay=57 

console.1log(a); // 在 控制 台 输 出 a 


</script> 


使 用 Firefox 浏览 器 运行 上 述 代 码 ， 可 以 得 到 如 图 24-13 所 示 的 结果 。 


晶 sffome> 目 preevelog 


图 24-13 程序 运行 结果 3 
5. debugger 关键 字 的 使 用 


debugger 关键 字 一 般 是 用 来 设置 断 点 ， 即 停止 执行 JavaScript， 调 用 调试 函数 。debugger 关键 字 与 在 调 
试 工具 中 设置 断 点 的 效果 是 一 样 。 这 种 方法 很 简单 ， 只 需要 在 进行 调试 的 地 方 加 入 debugger 关键 字 ， 然 后 
当 浏 览 器 运行 到 这 个 关键 字 的 时 候 ， 就 会 提示 是 否 打开 调试 ， 如 图 24-14 所 示 ， 选 择 “ 是 ” 即 可 。 


内 x 


mm 
此 网 于 全 一 并 洪 ， 汉 革 异 天 本 肝 公民 上 上 只 全 下 并 生 下 到 行 。 划 时 吏 丰 开 


图 24-14 ”提示 是 否 打开 调试 
下 面 给 出 一 个 具体 实例 ， 代 码 如 下 : 
<script type="text/javascript"> 
Var a=6; 
a*=5; 
debugger; 


console.10g(a); 
</script> 


24.4 ” ”JavaScript 优化 


JavaScript 主要 优化 的 是 脚本 程序 代码 的 下 载 时 间 和 执行 效率 ， 因 为 JavaScript 运行 前 不 需要 进行 编译 
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而 直接 在 客户 端 运行 ， 所 以 代码 的 下 载 时 间 和 执行 效率 直接 决定 了 网 页 的 打开 速度 ， 从 而 影响 着 客户 端的 
用 户 体验 效果 。 本 节 主 要 介绍 了 JavaScript 优化 的 一 些 原 则 方法 。 


1. 尽量 简化 代码 
给 JavaScript 代码 进行 “减肥 ”是 简化 代码 的 一 个 非常 重要 的 原则 。 给 代码 “减肥 ”就 是 在 将 工程 上 
传 到 服务 器 前 ， 尽 量 缩短 代码 的 长 度 ， 去 除 不 必要 的 字符 ， 包 括 注释 、 不 必要 的 空格 、 换 行 等 。 如 下 面 
的 代码 : 
function getUsersMessage (){ 
for(var i=0;i<10;i++){ 
if (i%2==0){ 
document .write (i+" "™); 
} 


} 


对 于 上 面 的 代码 可 以 优化 为 如 下 所 示 的 代码 : 

function getUsersMessage() {for(var i=0;i<10;i++) {if (i%2==0) {document.write (i+" ");}}} 

此 外 ， 在 使 用 布尔 值 tue 和 false 时 ， 可 以 分 别 用 1 和 0 来 替换 ， 在 一 些 条 件 非 语 句 中 ， 可 以 使 用 逻辑 
非 操 作 符 “! ”来 替换 ; 定义 数组 时 使 用 的 new array0 可 以 用 “[]” 替 换 ; 等 等 。 这 样 都 可 以 节省 不 少 空间 。 
如 下 面 的 代码 ; 
if(str != null){//A) 
var myarray=new Array (1,2); 

对 上 面 的 代码 可 以 使 用 如 下 代码 替换 : 
if(!str) {//} 
var myarray=[1,2]; 
2. 合理 声明 变量 
在 JavaScript 中 ， 变 量 的 声明 方式 可 分 为 显 式 声明 和 隐 式 声明 ,使 用 var 关键 字 进 行 声明 的 就 是 显 式 声 
明 ， 而 没有 使 用 var 关键 字 的 就 是 隐 式 声明 。 在 函数 中 显 式 申明 的 变量 为 局 部 变量 ， 隐 式 声明 的 变量 为 全 
局 变量 。 如 下 面 的 代码 : 
function test1(){ 

Var a=0; 

b=1; 

} 

变量 a 声明 时 使 用 了 var 关键 字 ， 为 显 式 声明 ， 所 以 a 为 局 部 变量 ， 而 声明 变量 b 时 没有 使 用 var 关键 
字 ， 为 隐 式 声明 ， 所 以 b 为 全 局 变量 。 

在 JavaScript 中 , 局 部 变量 只 在 其 所 在 函数 执行 时 生成 的 调用 对 象 中 存在 ， 当 其 所 在 函数 执行 完毕 时 局 
部 变量 就 立即 被 销毁 了， 而 全 局 变量 在 整个 程序 的 执行 过 程 中 都 存在 ， 直 到 浏览 器 关闭 后 才 被 销毁 。 如 在 
上 面 的 函数 执行 完毕 后 ， 再 分 别 执行 函数 test20 和 test30: 

function test2(){ 

alert (a); 
} 
function test3(){ 


alert (b); 
} 
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这 时 会 发 现 test20 函 数 运行 时 会 报错 ， 浏 览 器 会 提示 变量 a 未 声明 ， 而 test30 函 数 可 以 顺利 地 执行 。 说 
明 在 执行 了 testl0 函 数 后 ， 局 部 变量 a 立即 被 销 毁 了， 而 全 局 变量 b 还 存在 。 所 以 为 了 节省 系统 资源 ， 当 
不 需要 全 局 变量 时 ， 在 函数 体 中 都 要 使 用 var 关键 字 来 声明 变量 。 


3. 尽量 使 用 内 置 函 数 

与 C、java 等 语言 一 样 ，JavaScript 也 有 自己 的 函数 库 ， 函 数 库 里 有 很 多 内 置 函数 ， 用 户 可 以 直接 调用 
这 些 函 数 。 当 然 , 开发 人 员 也 可 以 自己 去 写 那些 函数 , 但 是 JavaScript 中 的 内 置 函 数 的 属性 方法 都 是 经 过 C、 
C++ 之 类 的 语言 编译 的 ， 而 开发 者 自己 编写 的 函数 在 运行 前 还 要 进行 编译 ， 所 以 在 运行 速度 上 JavaScript 的 
内 置 函 数 要 比 自己 编写 的 函数 快 很 多 。 


4. 合理 书写 if 语句 
在 编写 大 的 程序 时 几乎 都 要 用 到 让 语句， 为 了 提高 代码 的 执行 速度 ， 在 写 让 语句 和 else 语句 时 可 以 把 泡 
各 种 情况 按 其 可 能 性 从 高 到 低 排 列 ， 这 样 就 可 以 在 运行 时 相对 地 减少 判断 的 次 数 。 


5. 最 小 化 语句 数量 

最 小 化 语句 数量 的 一 个 最 典型 例子 就 是 当 在 一 个 页 面 中 需要 声明 多 个 变量 时 ， 就 可 以 使 用 一 次 var 关 交 
键 字 来 定义 这 些 变量 。 如 下 面 的 代码 : 

var name = "zhangsan" 

var age = 227 

Var sex = " 男 "; 

var myDate = new Date(); 


上 面 的 代码 使 用 了 四 次 var 关键 字 声明 了 四 个 变量 ,浪费 了 系统 资源 。 可 以 将 这 段 代码 用 如 下 代码 替换 ; 


Var name = "zhangsan", age = 22, sex = " 男 ", myDate = new Date(); 


24.5 ”加 载 图像 时 的 错误 提示 


有 时 在 打开 网 页 时 ,会 弹出 一 个 提示 框 ， 提示 用 户 图 像 加 载 错 误 ， 这 是 因为 在 网 页 中 定义 了 一 个 图 像 ， 
如 果 没有 被 定义 是 图 像 的 源 文件 所 引起 的 。 
【 例 24-4】 (实例 文件 ，ch24\Chap24.4html) 加 载 图 像 时 的 错误 提示 。 


<!DOCTYPE html> 
<html> 
<head> 
<title> 加 载 图 像 时 的 错误 提示 </title> 
<script language="javascript"> 
function ImgLoad(){ 
document .images[0] .onerror=function()1{ 
alert ("您 调用 的 图 像 并 不 存在 \n") ; 
a 
document .images[0] .src="test.gif"; 
} 
</script> 
</head> 
<body onload="ImgLoad()"> 
<img/> 
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pa | 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 
XA 


</body> 

</html> 

相关 的 代码 实例 请 参考 Chap24.4.html 文件 ， 然 后 双击 该 文件 ， 在 正 浏览 器 中 运行 的 结果 如 图 23-15 
所 示 。 


A =maamerTPE 


[| 


或 100% ~ 


图 24-15 程序 运行 结果 4 


24.6 ”就 业 面试 技巧 与 解析 


24.6.1 面试 技巧 与 解析 (一) 


面试 官 : 您 在 前 一 家 公司 的 离职 原因 是 什么 ? 

应 聘 者 : 我 离职 是 因为 这 家 公司 倒闭 了 ; 我 在 公司 工作 了 三 年 多 ， 与 公司 有 较 深 的 感情 ， 从 去 年 开始 ， 
由 于 市 场 形势 突变 ， 公 司 的 局 面 急转直下 ; 到 眼下 这 一 步 我 觉得 很 遗憾 ， 但 还 要 面 对 现 实 ， 重 新 寻找 能 发 
挥 我 能 力 的 舞台 。 


24.6.2 面试 技巧 与 解析 〈 二 ) 


面试 官 : 如 果 你 在 这 次 面试 中 没有 被 录用 ， 你 怎么 打算 ? 

应 聘 者 : 现在 的 社会 是 一 个 竞争 的 社会 ， 从 这 次 面试 中 也 可 看 出 这 一 点 ， 有 竞争 就 必然 有 优 劣 ， 有 成 
功 必定 就 会 有 失败 。 成 功 的 背后 往往 有 许多 的 困难 和 挫折 ， 如 果 这 次 失败 了 也 仅仅 是 一 次 而 已 ， 只 有 经 过 
经 验 经 历 的 积累 才能 塑造 出 一 个 完全 的 成 功 者 。 我 会 从 以 下 几 个 方面 来 正确 看 待 这 次 失败 ; 

(1) 要 敢于 面 对 ， 面 对 这 次 失败 不 气 包 ， 接 受 已 经 失去 了 这 次 机 会 就 不 会 回头 这 个 现实 ， 从 心理 意 
志和 精神 上 体现 出 对 这 次 失败 的 抵抗 力 。 要 有 自信 ， 相 信 自己 经 历 了 这 次 之 后 经 过 努力 一 定 能 行 ， 能 够 
超越 自我 。 

(2) 善于 反思 ， 对 于 这 次 面试 经 验 要 认真 总 结 ， 思 考 剖 析 ， 能 够 从 自身 的 角度 找 差距 。 正 确 对 待 自己 ， 
实事 求 是 地 评价 自己 ， 辩 证 地 看 待 自 己 的 长 短 得 失 ， 做 一 个 明白 人 。 

(3) 走出 阴影 ， 要 克服 这 一 次 失败 带 给 自己 的 心理 压力 ， 时 刻 牢 记 自 己 的 弱点 ， 防 患 于 未 然 ， 加 强 学 
习 ， 提 高 自身 素质 。 
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在 本 篇 中 , 将 贯通 前 面 所 学 的 各 项 知识 和 技能 来 学 会 JavaScript 在 不 同行 业 开 发 中 的 应 用 技能 。 通 过 本 
篇 的 学 习 ， 读者 将 具备 JavaScript 在 金融 理财 、 移 动 互联 网 、 电 子 商 务 等 行业 开发 的 应 用 能 力 。 另 外 补充 了 
软件 工程 师 必 备 素养 与 技能 ， 为 日 后 进行 软件 开发 积累 下 行业 开发 经 验 。 


第 25 章 ”JavaScript 在 金融 理财 行业 开发 中 的 应 用 
第 26 章 JavaScript 在 移动 互联 网 行业 开发 中 的 应 用 
第 27 章 JavaScript 在 电子 商务 行业 开发 中 的 应 用 
第 28 章 软件 工程 师 必 备 素养 与 技能 


第 25 章 
JavaScript 在 金融 理财 行业 开发 中 的 应 用 


”学习 指引 


JavaScript 在 金融 理财 行业 也 被 广泛 地 应 用 ， 如 常见 的 理财 产品 购买 、 查 询 等 系统 都 是 通过 JavaScript 
来 实现 具体 功能 的 。 本 章 以 一 个 简单 的 金融 理财 购买 系统 为 例 ,介绍 JavaScript 在 金融 理财 行业 开发 中 的 
应 用 。 


”重点 导读 


“了 解 系统 功能 描述 。 
* 掌握 系统 功能 分 析 及 实现 方法 。 


25.1 系统 功能 描述 


该 案例 介绍 一 款 基 于 JavaScript 中 的 jQuery 技术 开发 的 网 页 版 金融 理财 平台 系统 ， 通 过 模拟 用 户 、 购 
买 产品 等 功能 实现 理财 平台 数据 的 动态 展示 及 数据 的 增加 修改 。 

程序 入 口 为 用 户 登录 界面 : 数据 文件 中 一 共 设置 了 三 个 账户 ， 两 个 个 人 账户 一 个 企业 账户 ， 用 户 需要 
输入 正确 的 用 户 名 、 密 码 方 可 登录 ， 如 图 25-1 所 示 。 


理财 平台 登录 页 面 


用 户 各 


更 西 广 


ES 


图 25-1 理财 平台 登录 页 面 


第 项 章 JavaScript 在 金融 理财 行业 开发 中 的 应 用 


用 户 登录 成 功 后 进入 理财 平台 主 界面 ， 有 购买 理财 产品 、 查 询 我 的 理财 、 在 线 风险 评估 三 块 功能 ， 如 
图 25-2 所 示 。 


主 菜单 按钮 页 面 


Ce ee] ER 
PE Ey 个 


25-2 理财 平台 主 界面 


25.2 ”系统 功能 分 析 及 实现 


一 个 简单 的 金融 理财 产品 系统 ， 包 括 登 录 页 面 、 产 品 信息 页 面 、 购 买 产品 页 面 等 。 本 节 就 来 分 析 金 融 
理财 系统 的 功能 以 及 实现 方法 。 


25.2.1 功能 分 析 


设计 理财 平台 主要 的 就 是 理财 产品 列表 以 及 购买 、 查 看 个 人 持 有 产品 、 风 险 评估 三 个 方面 ， 在 购买 的 
过 程 中 需要 校 验 的 内 容 有 很 多 ， 包 括 校 验 风险 等 级 、 校 验 账户 类 型 、 校 验 余 额 信息 、 校 验 认购 上 限 、 校 验 
起 购 金额 、 校 验 产品 余额 、 校 验 登 录 密码 、 执 行 交 易 并 进行 缓存 数据 修改 等 。 


25.2.2 ”功能 实现 


首先 开发 的 是 登录 功能 ， 由 于 是 纯 前 端 项 目 ， 就 不 涉及 数据 库 等 其 他 元 素 ， 所 以 设计 过 程 中 打算 运用 
浏览 器 的 缓存 机 制 将 提前 写 好 的 json 数据 文件 读 取 到 并 放 入 缓存 中 ， 个 人 信息 及 理财 产品 信息 两 块 。 

用 户 信息 代码 如 下 ， 

{ 


"users": [ 

"name": "zhangsan", 
wid": "10001", 
"pwd": "al2345", 
"balance": "1000000", 
"riskLevel": "1", 
"tran pwd":"111111", 
“haveFinances":null, 
"personalOorCompany™": "0", 
"sex":"b" 

}, 

{ 


理财 产品 信息 代码 如 下 : 


"finances": [ 
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ee 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 


B24 


要 


json 数据 字段 描述 代码 如 下 : 


开发 的 第 二 部 即 是 登录 之 后 的 三 大 块 理财 功能 主 菜单 页 面 ， 并 在 每 一 个 菜单 按钮 如 上 点 击 事件 跳 转 至 
相应 功能 。 具 体 代码 如 下 : 


524 


第 国 章 JavaScript 在 金融 理财 行业 开发 中 的 应 用 


理财 列表 页 面 展示 ， 表 头 主要 展示 几 个 主要 属性 ， 通 过 单 击 购买 跳 转 至 购买 页 面 。 具 体 代码 如 下 : 


理财 购买 校 验 ， 校 验 风 险 等 级 、 校 验 账户 类 型 、 校 验 余 额 信息 、 校 验 认 购 上 限 、 校 验 起 购 金额 、 校 验 
产品 余额 、 校 验 登录 密码 、 执 行 交 易 并 进行 缓存 数据 修改 ， 具 体 代码 如 下 : 


Ha Sess 3+JavaScript 从 入 门 到 项 目 实 践 ( 超 信 版 ) 
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具体 方法 可 参照 源 文件 中 的 coreSystemCheckjs 文件 。 
持 有 理财 产品 列表 展示 购买 过 的 理财 产品 ， 具 体 代码 如 下 : 


第 加 章 JavaScript 在 金融 理财 行业 开发 中 的 应 用 


说 明 : 通过 用 户 id 找到 该 用 户 ， 并 找到 该 用 户 持 有 的 产品 进行 遍历 展示 。 
风险 评估 的 具体 代码 如 下 ; 


ZE 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 
XH 


sessionData.users[i] .riskLevel="1"; 
var b = confirm(" 风 险 评估 成 功 , 您 的 风险 等 级 为 一 级 稳健 型 ,是 否 重新 进行 评估 ? "); 
if (b==true) { 
window.location.href = "riskAssessment .html"; 
Jelse{ 
window.location.href = "menuMain.html"; 


说 明 : 通过 对 所 有 包含 checked 的 类 进行 遍历 ， 来 获取 每 个 选项 对 应 的 分 数 求 和 。 从 而 获取 评估 后 所 
对 应 的 风险 等 级 ， 最 后 通过 用 户 记 找 到 用 户 的 风险 等 级 字段 名 并 修改 其 风险 等 级 。 


ey 


还 休 


(1) 进入 购买 理财 产品 功能 。 
单 击 进入 购买 理财 产品 页 面 会 显示 理财 列表 ， 各 理财 产品 展示 在 页 面 上 ， 如 图 25-3 所 示 。 


全 570% | 5000000 EE 2017-10-10 | 总 网 习 
移 员 二 妃 5.60% | 6000000 区 好 型 2017-12-10 让 抽风 工 
全 满 钼 满 1 写 860% | 10000000 平 街 开 2017-10-10 矶 我 购 习 
全 洒洒 2 号 15.60% 200,000.00 增长 虹 2017-10-10 席 开 购买 
投机 高 改 巷 2560% 50000000 | 增长 噶 2017-10-10 二 我 购买 


25-3 ”购买 理财 产品 功能 


单 击 某 一 商品 进行 购买 则 跳 转 至 该 产品 的 详情 页 面 ， 并 展示 近 六 月 内 实际 收益 率 和 预期 收益 率 的 折线 
图 (静态 数据 )， 如 图 25-4 所 示 。 


理财 产品 详情 


3 S70% Hmess Soo% 
ne aonaa mr 二 0 
Ee omnem ee Ra 
mn 个 AS/ ap 

ha 一 mi 十 25000000 
se oa aa 2018-10.70 


25-4 ”理财 产品 详情 


单 击 购买 后 进入 购买 页 面 ， 轮 播 显示 用 户 个 人 信息 ， 下 方 填写 购买 份额 及 交易 密码 ， 输 入 正确 后 确认 
购买 即 可 成 功 ， 如 图 25-5 所 示 。 
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第 固 章 JavaScript 在 金融 理财 行业 开发 中 的 应 用 


产品 名 称 : 稳 碰 二 号 
产品 代码 : 98561 


图 25-5 ”购买 理财 产品 


单 击 “确认 购买 ”按钮 ， 即 可 弹出 一 个 信息 提示 框 ， 单 击 “ 确 定 ”按钮 ， 即 可 继续 产品 的 购买 操作 ， 
如 图 25-6 所 示 。 


localhost63342 显示 : 
交 蚌 成 功 ， 是否 卉 块 最 买 ? 


确定 取 抽 


25-6 ”信息 提示 框 
(2) 进入 我 的 理财 产品 功能 。 
进入 我 的 理财 页 面 ， 则 刚刚 购买 的 产品 会 出 现在 持 有 理财 列表 内 ， 如 图 25-7 所 示 。 


我 的 理财 产品 


移师 二 号 
观 直 年 和 二 :5.60% 人 
持 有 份 族 120000 


图 25-7 ”我 的 理财 产品 功能 
这 时 可 以 单 击 某 一 个 持 有 的 理财 产品 ， 进 入 详情 页 面 ， 如 图 25-8 所 示 。 


持 有 ( 稳 赚 一 号 ) 产品 明细 


25-8 理财 产品 详情 页 面 
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单 击 “ 继 续 增 加 持 有 份额 ”按钮 ， 可 以 对 该 产品 继续 进行 购买 ， 如 图 25-9 所 示 。 


25-9 ”再 次 购买 理财 产品 


(3) 进入 在 线 风险 评估 页 面 。 
直接 可 以 进行 选择 选项 ， 然 后 提交 评分 ， 如 图 25-10 所 示 。 


Ta 
三 中 localhost63342 显示 : 


二 了 人 2， 的 风 上 等 为 双 是 


Fosp (全 | 二 莉 


Commagr pi (折合 人 RN ) 7 


RF 
十 五 更 下) -505 天 ( 诗 》 
0 更 ( 下 亲 ) -1007 下 ( 音 ) 
100 万 元 (下 各 J-1009 万 元 ( 癌 ) 
1000 万 元 (下 


Do 
这 
7 
3 

OsiS PP. Bn 
Ee 

A FE 

2 

See 

CS 


e000 e000 eoo0o0o0l oe@oodl 


@oooo 


图 25-10 ”在线 风险 评估 页 面 
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第 26 章 
JavaScript 在 移动 互联 网 行业 开发 中 的 应 用 


后” 学 习 指引 

移动 互联 网 是 移动 和 互联 网 融合 的 产物 ， 它 继承 了 移动 随时 随地 和 互联 网 分 享 、 开 放 、 互 动 的 优势 ， 
是 整合 二 者 优势 的 “升级 版 本 ”。 目 前 ， 随 着 移动 互联 网 技术 的 发 展 ， 各 种 新 技术 不 断 涌现 ，JavaScript 也 
不 例外 。 本 章 以 一 个 简单 的 手机 网 页 为 例 ， 介 绍 JavaScript 技术 在 移动 互联 网 行业 开发 中 的 应 用 。 
二 ”重点 导读 


"了解 系统 功能 描述 。 
* 掌 握 系统 功能 分 析 及 实现 方法 。 


26.1 系统 功能 描述 


本 系统 是 一 个 手机 版 网 页 系统 ， 包 括 首页 、 次 页 等 页 面 ， 通 过 手指 点 按 相应 的 文字 ， 即 可 进入 此 页 面 ， 
操作 非常 简单 。 


26.2 系统 功能 分 析 及 实现 


一 个 简单 的 手机 网 页 系统 ,需要 加 入 JavaScript 的 不 同 库 ,才能 使 手机 版 网 页 系统 运行 正常 。 本 节 就 来 
分 析 手 机 网 页 系统 的 功能 及 实现 方法 。 


26.2.1 功能 分 析 


本 手机 版 网 页 系统 主要 由 两 部 分 组 成 ， 分 别 介绍 如 下 : 
(1) jQuery Mobile 库 : jQuery Mobile 是 用 于 创建 移动 Web 应 用 的 前 端 开 发 框架 , 结合 HTML 5 和 CSS 3， 


) 


HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 


可 以 开发 与 移动 互联 网 技术 相关 的 技术 ， 如 手机 版 网 页 、 手 机 App 程序 等 。 
(2) index.html: 它 是 本 案例 的 入 口 ， 只 需要 通过 手机 浏览 器 打开 此 文件 就 可 以 预览 网 页 效果 。 


6.2.2 ”功能 实现 
下 面 给 出 实现 本 系统 功能 的 主要 代码 ，HTML 的 结构 代码 如 下 
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</div> 
</div> 
</body> 
</html> 


js 控制 代码 如 下 : 


<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<script> 


var i = 07 
var img = new Array ("piecel.jpg", "piece2.jpg", "piece3.jpg"); 
var msg = new Rrray("" 西 红 柿 炒 鸡 蛋 " 一 又 名 寿 茄 炒 蛋 , 是 许多 百姓 家 庭 中 一 道 普通 的 大 众 菜 肴 。 误 调 方法 简单 易学 ， 
营养 搭配 合理 。"，"" 酸 后 土 豆 丝 "一 是 一 道人 见 人 爱 的 家 常 莱 , 制作 原料 有 土豆 、 状 椒 、 白 醋 等 。"，" "红烧 狮子 头 "一 汉族 特色 名 
莱 , 是 中 国 逢 年 过 节 常 吃 的 一 道 菜 , 也 称 四 喜 丸 子 。") 7 
function prev(){ 
i 
if (i < 0) {i= 2;} 
$("#roleimg") .attr("src", img[i]); 
S$("#rolemsg") .text (msg [i]); 


function next(){ 
i++; 
2 0 
$("#roleimg") .attr ("src", img[i]); 
$("#rolemsg") .text (msg[i]); 

} 

</script> 


26.2.3 ”程序 运行 


手机 版 网 页 系统 开发 完成 后 ， 在 手机 浏览 器 打开 主 文件 index.html， 即 可 打开 首页 ， 如 图 26-1 所 示 。 
点 击 “ 川 味 菜系 ”按钮 ， 即 可 进入 次 页 面 ， 如 图 26-2 所 示 。 


Bo = 5 x] 
enocahosvcyuan 太 年 coose 


flewlocalhosvCyUser: 识 靶 6053  ] 


川 可 作为 中 国 汉族 传统 的 四 大 菜系 之 
一 、 中 国 八大 菜系 之 一 ， 取 材 广泛 ， 
调味 多 变 , 菜 式 多 样 , 口味 清 鲜 醇 浓 
并 在， 以 善 用 麻 祝 调味 著称 


川 味 葛 系 


图 26-2 子 页 面 1 
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在 首页 中 点 击 “ 家 常 菜系 ”按钮 ， 即 可 进入 次 页 面 ， 如 图 26-3 所 示 。 
点 击 “ 下 一 个 ”按钮 ， 即 可 进入 下 一 个 页 面 ， 如 图 26-4 所 示 。 在 该 页 面 中 还 存 有 “ 


可 首页 ”和 “上 一 
个 ”按钮 等 ， 用 户 可 以 在 手机 中 随意 翻阅 页 面 ， 并 查看 相关 信息 。 


fiewocalnosvcruser 友基 6055 fiewiocaihosucvusen 姬 6005 】 


. 否 红 柿 炮 鸡蛋" - 又 名 秋 落 重 ,是 许多 e 区 
百姓 家 许 中 一 道 普通 的 大 众 划 条 。 训 调 方 A 


人 菜 ,制作 原料 有 土豆 、 若 概 ， 白 本 等, 


图 26-3 子 页 面 2 26-4 下 一 个 页 面 
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第 27 章 
JavaScript 在 电子 商务 行业 开发 中 的 应 用 


后” 学 习 指引 


电子 商务 的 兴起 ， 带 动 了 越 来 越 多 的 商家 将 传统 的 销售 渠道 转向 网 络 营销 ， 大 型 B2C 模式 的 电子 商务 
网 站 也 越 来 越 多 。 通 常 来 说 ， 网 站 用 户 体验 效果 直接 关系 到 网 站 的 访问 量 、 点 击 率 、 回 头 率 等 技术 指标 ， 
对 电子 商务 网 站 来 说 网 站 的 用 户 流 量 与 订单 量 有 密切 关系 。 本 章 以 一 个 电子 商务 网 站 为 例 ， 介 绍 JavaScript 
在 电子 商务 行业 开发 中 的 应 用 。 


二 ”重点 导读 


"了 解 系统 功能 描述 。 
* 掌握 系 统 功能 分 析 及 实现 方法 。 


27.1 系统 功能 描述 


京东 商城 (http:/www:jd.com) 是 中 国 B2C 市 场 较 大 的 综合 型 网 购 商城 ， 是 中 国电 子 商务 领域 具有 影 
响 力 的 电子 商务 网 站 之 一 ， 无 论 在 访问 量 、 点 击 率 、 销 售 量 及 行业 影响 力 上 ， 均 在 国内 B2C 网 购 平台 中 首 
届 一 指 ， 下 面 就 以 京东 网 站 为 例 ， 来 介绍 JavaScript 在 电子 商务 行业 开发 中 的 应 用 。 


27.2 系统 功能 分 析 及 实现 


京东 商城 的 网 站 设计 充分 体现 了 “以 用 户 为 中 心 ” 的 设计 理念 ， 前 全 网 站 的 用 户 体验 设计 非常 经 典 ， 
用 户 界 面 表现 重点 突出 ， 布 局 合理 。 


AR _ 
HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 


27.2.1 功能 分 析 


从 京东 网 的 导航 结构 来 看 ， 京 东 网 栏目 设计 包括 秒杀 、 优 惠 券 、 闪 购 、 拍 卖 、 京 东 服饰 、 京 东 超市 、 
生 鲜 、 全 球 购 、 京 东 金 融 等 ， 如 图 27-1 所 示 。 


秒杀 。 优惠 券 ”内 购 拍卖， 京东 服饰 。 京东 超市 。 生 鲜 ”全球 购 。 京东 金融 
图 27-1 京东 网 站 的 导航 结构 


从 京东 网 的 网 站 功能 来 看 ， 京 东 网 站 可 以 分 为 商品 内 容 展示 区 与 用 户 会 员 中 心 两 部 分 。 在 对 京东 网 站 
进行 分 析 时 ， 这 里 以 网 站 首页 布局 为 例 来 对 京东 网 站 进行 分 析 。 从 京东 网 站 首页 重点 展示 的 内 容 来 划分 ， 
可 以 将 首页 布局 分 为 以 下 几 部 分 。 

第 一 部 分 作为 首页 的 核心 展示 区 , 采用 目前 比较 流行 的 左 、 中 、 右 结构 设计 ， 依 次 为 商品 分 类 导航 
网 站 导航 及 核心 广告 区 、 网 站 公告 区 ， 如 图 27-2 所 示 。 


网 


图 27-2 首页 的 核心 展示 区 


第 二 部 分 是 京东 秒杀 促销 商品 展示 区 ， 采 用 左 、 右 设计 模式 。 左 边 突出 位 置 重 点 展示 每 日 精 选 的 性 价 
比 优良 的 促销 商品 ， 右 边 设计 为 首发 产品 和 团购 产品 的 推广 区 ， 如 图 27-3 所 示 。 


27-3 ”京东 秒杀 促销 商品 展示 区 


第 三 部 分 是 分 类 商品 展示 区 ， 京 东 首页 商品 分 类 展示 采用 通栏 设计 模式 ， 突 出 分 类 的 商品 特点 。 这 种 


通过 红色 分 隔 线 使 该 层次 区 域内 形成 了 一 个 内 部 导航 效果 ， 小 导航 的 左下 方 是 “计算 机 数码 ”商品 二 级 分 


536 


第 贺 章 JavaScript 在 电子 商务 行业 开发 中 的 应 用 


类 ， 中 间 部 分 是 促销 商品 展示 区 ， 小 导航 的 右 下 方 是 该 分 类 下 商品 品牌 展示 区 ， 如 图 27-4 所 示 。 


8 折 3 件 7 折 


癌 
副 


租 片 冲 B 
过半 一同 


图 27-4 分 类 商品 展示 区 


27.2.2 ”功能 实现 
京东 网 站 界面 整体 风格 朴素 、 简洁 ， 表 现 重 点 突出 ,技术 上 通过 JavaScript 特效 更 好 地 表现 突出 展示 部 
分 ， 吸 引用 户 眼球 。 关 键 的 功能 分 析 如 下 。 


1. 商品 分 类 菜单 
jQuery 实现 仿 京东 网 商品 分 类 菜单 功能 ， 该 功能 通常 应 用 于 购物 网 站 实现 商品 分 类 的 功能 。jQuery 代 
码 如 下 : 


<script src="script/jqueryl.4.2.mi 


js" type="text/javascript"></script> 


<link href="css/category.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"/> 
$ (document) .ready (function () { 
$(".h2 cat") .mousemove (function(){ 
$ (this) .addclass ("h2 cat active cat"); 
}) .mouseout (function (){ 
$ (this) .removeClass ("active cat"); 
Ds; 
Ts 
</script> 


页 面 HTML 代码 如 下 : 
<div class="my left category"> 
<h1> 全 部 分 类 </h1> 


<div class="my left cat list"> 
<h2><a href="#"> 图 书 、 音 像 </a></h2> 


<div class="h2 cat"> 
<h3><a href="#"> 人 文 社 科 </a></h3> 
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<div class="h3 cat"> 
<div class="shadow"> 

<div class="shadow border"> 
<ul> 

<li><a href="#"> 历 史 </a></1i> 
<1i><a href="#"> 心 理学 </a></1i> 
<1i><a href="#"> 政 治 </a></1i> 
<li><a href="#"> 军 事 </a></1i> 
<li><a href="#"> 社 会 科学 </a></1i> 
</ul> 

</div> 

</div> 

</div> 

</div> 

<div class="h2 cat"> 

<h3><a href="#"> 管 理 励志 </a></h3> 


2. 首页 或 二 级 频道 界面 幻灯 图 片 切换 
jQuery 实现 幻灯 图 片 切换 。 该 功能 通常 应 用 于 网 站 首页 界面 或 二 级 频道 界面 来 表现 焦点 广告 , 如 图 27-5 


所 示 。 


图 27-5 ”jQuery 实现 幻灯 图 片 切换 
jQuery 代码 如 下 : 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"> 


</script> 
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<script type="text/javascript" src="script/jquery.sudoslider.min.js"> </script> 
<script type="text/javascript"> 
$ (document) .ready (function (){ 
var sudoslider = $("#slider") .sudoslider ({ 
numeric: true, 
continuous:true, 
auto:true 
Ds 
Ds 
</script> 


第 贺 章 JavaScript 在 电子 商务 行业 开发 中 的 应 用 


HTML 代码 ; 


3. 单 排 图 文 上 下 间歇 滚动 
jQuery 实现 单 排 图 文 上 下 间 鞭 滚动 效果 。 该 功能 在 网 站 中 通常 应 用 在 需要 表现 内 容 较 多 ， 但 希望 应 用 
版 面 较 小 的 板块 内 容 。 


ee ( 超 信 版 ) 


NA 


”27.2.3 ”程序 运行 
这 里 以 浏览 京东 商城 网 站 为 例 ， 来 介绍 程序 完成 后 的 程序 运行 。 在 正 浏览 器 的 地 址 栏 中 输入 京东 商城 
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的 网 址 https://www.jd.com， 即 可 打开 京东 网 首页 ， 如 图 27-6 所 示 。 
Ese 国 ~ 国 hape/Neewidcom ew-oresa " P- 负 c 国 =s00.COMWIER - 有 © 
2 SN SE KB IRD sum 
S ES | amer © 


未 /未 电 /未 装 / 画 己 
田林 /女生 /至 严 /内 在 
美 史 入/ 加 物 

女 畦 /第 包 / 镜 去 / 珠 衬 


移 壮 ”优惠 和 内 购 。 拍卖 京东 最 秘 。 京东 超市 。 生 样 。 全 天 网 


美国 V6 限 量 开 抢 


图 27-6 京东 网 站 首页 
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第 28 章 
软件 工程 师 必 备 素养 与 技能 


二 ”学习 指引 


在 现代 软件 企业 中 ， 软 件 工程 师 的 主要 职责 是 帮助 企业 或 个 人 用 户 应 用 计算 机 实现 各 种 功能 ， 满 足 用 
户 的 各 种 需求 。 要 想 成 为 一 名 合格 的 软件 工程 师 ， 需 要 具备 基本 的 素养 和 技能 。 本 章 介绍 软件 工程 师 必 备 
的 一 些 素 养 和 技能 。 


二 ”重点 导读 


。 热 悉 软 件 工 程 师 的 基本 素养 。 
熟悉 个 人 素质 必修 课程 。 


28.1 软件 工程 师 的 基本 素养 


如 何 成 为 一 名 合格 的 软件 工程 师 ? 软件 工程 师 的 发 展 前 景 在 哪里 ? 在 信息 技术 飞速 发 展 的 今天 ， 一 名 
优秀 的 软件 工程 师 不 仅 要 具备 一 定 的 软件 编写 能 力 ， 而 且 要 经 常 问 自己 未 来 的 方向 ， 这 样 才能 不 断 补 充 新 
的 知识 体系 ， 应 对 即将 到 来 的 各 种 挑战 。 如 果 用 一 句 话 总 结 软件 工程 师 的 基本 状态 ， 那 恐怕 就 是 “学 习 学 
习 再 学 习 ”。 但 是 除了 不 断 学 习 外 ， 具 备 一 些 基本 的 专业 素养 是 成 为 一 个 软件 工程 师 的 前 提 ， 如 图 28-1 所 
示 。 下 面 介绍 几 种 基本 的 素养 。 


1. 计算 机 基础 能 力 

计算 机 基础 能 力 包括 熟悉 计算 机 软件 工作 的 基本 原理 ， 并 具有 过 硬 的 计算 机 操作 能 力 。 

了 解 计算 机 操作 系统 的 工作 过 程 ， 知 道 计算 机 操作 系统 是 如 何 分 配 内 存 资源 、 调 度 作业 、 控 制 输 入 输 
出 设备 等 ， 熟 悉 计 算 机 程序 的 工作 过 程 ， 知 道 计算 机 程序 怎么 告诉 计算 机 要 做 哪些 事 ， 按 什么 步骤 去 做 。 

具有 过 硬 的 计算 机 操作 能 力 是 软件 工程 师 的 基本 功 ， 例 如 对 计算 机 的 相关 知识 有 基本 的 了 解 ， 包 括 软 
硬件 、 操 作 系统 、 常 用 键 的 功能 等 。 


第 国 章 软件 工程 师 必 备 素养 与 技能 


= 计算 机 基础 能 力 

| [aaa] 
一 人 | 较 强 的 英语 阅读 和 写作 能 力 

一 一 | 熟悉 软件 测试 基本 理论 及 任务 分 配 


图 28-1 软件 工程 师 的 基本 专业 素养 


具体 来 讲 ， 如 对 Windows、Linux、UNIX 等 大 型 主流 操作 系统 的 使 用 和 应 用 开发 的 熟练 掌握 ， 对 操作 
系统 中 常用 命令 (如 Ping 等 ) 的 使 用 ， 对 Office 或 WPS 等 办 公 软 件 的 应 用 能 力 ， 对 常用 办 公设 备 要 熟悉 ， 
如 打印 机 、 复 印 机 、 传 真 机 的 使 用 等 。 


2. 掌握 一 门 编程 语言 

软件 工程 师 的 一 个 重要 职责 是 把 用 户 的 需求 功能 用 某 种 计算 机 语言 予以 实现 ， 因 此 编码 能 力 直接 决 
定 了 项 目 开发 的 效率 。 这 就 要 求 软件 工程 师 至 少 掌握 一 门 编程 语言 , 如 PC 端 常用 的 C/C++、C# Java、 
PHP 语言 及 移动 端 常用 的 Object C、HTML 5， 并 熟悉 其 基本 语法 、 作 业 调 度 过 程 、 资 源 分 配 过 程 ， 这 
是 成 为 一 个 软件 工程 师 的 前 提 和 和 要求。 通俗 地 讲 ， 计 算 机 好 比 一 块 农田 ， 软 件 工程 师 就 是 农夫 ， 要 使 
用 一 定 的 编程 语言 这 个 工具 才能 生产 出 我 们 的 软件 作品 ， 熟 练 掌握 一 门 编程 语言 是 顺利 生产 软件 作品 
的 基石 。 


3. 熟悉 计算 机 数据 存储 过 程 

在 软件 工作 的 过 程 中 ， 要 产生 一 定 的 数据 输出 ， 如 何 管理 这 些 数据 也 是 软件 工程 师 必须 掌握 的 知识 。 名 
数据 输出 可 以 是 一 个 文本 文件 也 可 以 是 Excel 文件 ， 也 可 以 是 其 他 存储 格式 。 通 常 我 们 都 要 通过 数据 库 软 
件 去 管理 这 些 输出 的 数据 ， 因 此 与 数据 库 的 交互 在 所 有 软件 中 都 是 必 不 可 少 的 ， 了 解数 据 库 操作 和 编程 是 
软件 工程 师 需要 具备 的 基本 素质 之 一 。 


4. 较 强 的 英语 阅读 和 写作 能 力 

程序 世界 的 主导 语言 是 英文 ， 编 写 程序 开发 文档 和 开发 工具 帮助 文件 离 不 开 英文 ， 了 解 业 界 的 最 新 动 
向 、 阅 读 技术 文章 离 不 开 英文 ， 就 是 与 世界 各 地 编程 高 手 交流 、 发 布 帮助 请 求 同 样 离 不 开 英文 。 作 为 软件 
工程 师 ， 具 有 一 定 的 英语 基础 对 于 提升 自身 的 学 习 和 工作 能 力 极 有 帮助 。 


5. 软件 开发 及 测试 环境 搭建 

搭建 良好 的 软件 开发 与 测试 环境 是 软件 工程 师 需 要 具备 的 专业 技能 , 也 是 完成 开发 与 测试 任务 的 保证 。 
测试 环境 大 体 可 分 为 硬件 环境 和 软件 环境 。 硬 件 环境 包括 必需 的 PC 机 、 服 务 器 、 设 备 、 网 线 、 分 配器 等 
设备 ， 软 件 环境 包括 数据 库 、 操 作 系统 、 被 测试 软件 、 共 存 软件 等 ， 特 殊 条 件 下 还 要 考虑 网 络 环境 ， 例 如 
网 络 带 宽 、 卫 地 址 设置 等 。 


软件 工程 师 的 基本 素养 || 


2 加 


和 
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\ 


措 建 软件 开发 与 测试 环境 前 后 要 注意 以 下 几 点 。 
《1) 措 建 软件 开发 与 测试 环境 前 ， 确 定 软件 开发 与 测试 目的 。 软 件 开发 与 测试 目的 的 不 同 ， 在 措 建 环 
境 时 也 会 有 所 不 同 。 
(2) 软件 开发 与 测试 环境 尽 可 能 地 模拟 真实 环境 。 通 过 对 技术 支持 人 员 和 销售 人 员 的 了 解 ， 尽 可 能 地 
模拟 用 户 使 用 环境 ， 选 用 合适 的 操作 系统 和 软件 平台 。 
(3) 确保 软件 开发 与 测试 环境 无 毒 。 通 过 对 环境 的 杀毒 ， 以 及 安全 的 设置 ， 可 以 很 好 地 防止 病毒 感染 
测试 环境 ， 确 保 环境 无 毒 。 
(4) 营造 独立 的 测试 环境 。 测 试 过 程 中 要 确保 测试 环境 的 独立 ， 避 免 测 试 环境 被 占用 ， 影 响 测试 进度 
及 测试 结果 。 
(5) 构建 可 复 用 的 测试 环境 。 当 措 建 好 测试 环境 后 ， 对 操作 系统 及 测试 环境 进行 备份 是 必要 的 。 这 样 ， 
在 下 轮 测 试 时 可 以 直接 恢复 测试 环境 ， 避 免 重新 措 建 测试 环境 花费 时 间 ， 当 测试 环境 遭 到 破坏 时 ， 可 以 恢 
复 测试 环境 ， 避 免 测 试 数据 丢失 。 
6. 熟悉 软件 测试 基本 理论 及 任务 分 配 
名 本 和。 在 软件 投入 生产 前 ， 必 须 经 过 测试 过 程 ， 只 要 有 开发 ， 就 会 有 测试 。 软 件 工程 师 不 一 定 要 做 程序 测试 ， 
但 要 熟悉 软件 测试 过 程 ， 要 能 了 解 到 测试 工程 师 测试 bug 准确 定位 程序 问题 所 在 ， 这 就 注定 了 软件 测试 在 
软件 开发 过 程 中 是 不 可 或 缺 的 ， 因 此 精通 软件 测试 的 基本 理论 以 及 工作 任务 是 软件 工程 师 必 备 的 基本 素养 
和 技能 。 常 用 的 软件 测试 技术 包括 黑 盒 测 试 、 白 色 测 试 等 。 


[opetto 


28.2 个 人 素质 必修 课程 


作为 一 名 优秀 的 软件 工程 师 ， 首 先 要 对 工作 有 兴趣 ， 软 件 开发 与 测试 等 工作 很 多 时 候 都 显得 有 些 枯燥 ， 
此 热爱 软件 开发 或 测试 工作 ， 才 更 容易 做 好 这 类 工作 。 因 此 ， 除 了 具有 专业 技能 和 行业 知识 外 ， 还 应 具 
备 一 些 基 本 的 个 人 素质 ， 如 图 28-2 所 示 。 


本 及 沟通 能 力 | | ees 
| 个 人 素养 
二 所 所 | | miei 


28-2 ”软件 工程 师 的 个 人 素养 


1. 语言 表达 及 沟通 能 力 

良好 的 语言 表达 能 力 和 沟通 能 力 是 软件 工程 师 应 该 具备 的 一 个 很 重要 的 素质 。 在 公司 内 部 ， 团 队 要 经 
常 讨 论 解决 问题 ， 对 外 通过 沟通 分 析 客 户 合理 需求 ， 否 则 软件 输出 错误 ， 会 给 公司 和 客户 都 造成 不 必要 的 
损失 。 
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2. 过 硬 的 心理 素质 


开发 软件 本 身 就 是 一 项 艰苦 的 脑力 和 体力 劳动 ， 软 件 工程 师 开 发 完成 一 个 软件 ， 要 经 过 反复 修改 ， 花 
费 大 量 的 时 间 和 精力 ， 这 些 都 要 求 软件 工程 师 有 较 好 的 心理 承受 能 力 ， 以 及 过 硬 的 心理 素质 。 

3. 责任 心 与 自信 心 

责任 心 是 做 好 工作 的 必 备 素质 之 一 ， 软 件 工程 师 更 应 该 将 其 发 扬 光 大 。 如 果 工 作 中 没有 尽 到 责任 ， 甚 四 
至 敷衍 了 事 ， 这 将 会 把 工作 交 给 后 面 的 工作 人 员 甚 至 用 户 来 完成 ， 这 很 可 能 引起 非常 严重 的 后 果 。 

自信 心 是 现在 多 数 软件 工程 师 都 缺少 的 一 项 素质 ， 尤 其 在 面 对 需 要 编写 测试 代码 等 工作 时 ， 往 往 认为 
自己 做 不 到 。 因 此 ， 要 想 获得 更 好 的 职业 发 展 ， 软 件 工程 师 应 该 努力 学 习 ， 建 立 能 “解决 一 切 问题 ”的 
信心 。 

4. 团队 协作 能 力 a 

团队 协作 贯穿 软件 开发 的 整个 过 程 ， 从 项 目 立 项 、 项 目 需求 分 析 、 项 目 概要 设计 、 数 据 库 设计 、 功能。 
模块 编码 、 测 试 整个 软件 开发 过 程 ， 可 以 说 软件 开发 离 不 开 团队 协作 ， 如 果 没 有 良好 的 团队 协作 能 力 ， 软 
件 开发 过 程 只 能 事倍功半 。 


28.3 ”项目 开发 流程 


具备 了 个 人 素质 和 基础 的 编程 知识 ， 作 为 一 名 优秀 的 开发 人 员 还 要 熟悉 一 个 软件 项 目 怎么 开展 工作 ， 


这 个 就 是 项 目 开发 流程 ， 如 图 28-3 所 示 。 
[一 上 | 策划 阶段 


一 人 | 需求 分 析 阶 段 


CE 
ED 
E33 
em 


一 上 | 。 编码 阶段 


软件 项 目 开 发 流程 


[一 全 | 系统 测试 阶段 


一 一 和 | 系统 验收 阶段 


图 28-3 项目 开发 流程 


1. 策划 阶段 
软件 项 目 策划 阶段 是 项 目的 开始 形成 过 程 ， 解 决 了 软件 项 目 要 干什么 的 问题 。 一 个 成 功 的 软件 项 目 通 
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常 都 是 策划 阶段 做 的 踏实 有 效 的 项 目 。 在 这 个 阶段 要 由 专业 的 行业 人 员 分 析 市 场 情 况 ， 确 定 项 目的 可 行 性 、 
先进 性 及 项 目 解决 实际 问题 所 带 来 的 投入 产 出 问题 ， 形 成 项 目 策划 报告 书 。 一 般 可 以 按照 如 下 程序 进行 
输出 。 

1) 项 目 策划 草案 

项 目 策划 草案 应 包括 产品 简介 、 产 品目 标 及 功能 说 明 、 开 发 所 需 的 资源 、 开 发 时 间 等 。 

2) 风险 管理 计划 

也 就 是 把 有 可 能 出 错 或 现在 还 不 能 确定 的 东西 列 出 来 ， 并 制订 出 相应 的 解决 方案 。 风 险 发 现 得 越 早 对 
项 目 越 有 利 。 

3) 软件 开发 计划 

软件 开发 计划 的 目的 是 收集 控制 项 目 时 所 需 的 所 有 信息 ， 项 目 经 理 根据 项 目 策划 来 安排 资源 需求 ， 并 
根据 时 间 表 跟踪 项 目 进度 。 项 目 团队 成 员 则 根据 项 目 策划 ， 了 解 自己 的 工作 任务 、 工 作 时 间 以 及 所 要 依赖 
的 其 他 活动 。 

除 此 之 外 ， 软 件 开发 计划 还 应 包括 项 目的 应 收 标准 及 应 收 任务 〈 包 括 确定 需要 制定 的 测试 用 例 )。 

4) 人 员 组 织 结构 定义 及 配备 

常见 的 人 员 组 织 结构 有 垂直 方案 、 水 平方 案 和 混合 方案 3 种 。 垂 直方 案 中 每 个 成 员 会 充当 多 重 角色 ， 
而 水 乎 方案 中 每 个 成 员 会 充当 一 至 两 个 角色 ， 混 合 方案 则 包括 经 验 丰富 的 人 员 与 新 手 的 相互 融合 。 具 体 方 
案 应 根据 公司 人 员 的 实际 技能 情况 进行 选择 。 

5) 过 程控 制 计 划 

过 程控 制 计划 的 目的 是 收集 项 目 计划 正常 执行 所 需 的 所 有 信息 ， 用 来 指导 项 目 进 度 的 监控 、 计 划 的 调 
整 ， 以 确保 项 目 能 按时 完成 。 


2. 需求 分 析 阶 段 

软件 需求 分 析 是 策划 报告 的 细致 挖掘 ， 解 决 了 软件 项 目 如 何 干 的 问题 。 需 求 分 析 准确 与 否 最 后 直接 影 
响 到 项 目的 输出 ， 所 以 在 这 个 过 程 需要 专业 的 行业 人 员 与 软件 工程 师 进行 不 断 的 沟通 确定 需求 ， 形 成 项 目 
需求 分 析 报告 书 。 可 以 分 为 以 下 两 个 阶段 。 

1) 需求 获取 

需求 获取 ， 是 指 开 发 人 员 与 用 户 多 次 沟通 并 达成 协议 ， 对 项 目 所 要 实现 的 功能 进行 的 详细 说 明 。 需 求 
获取 过 程 是 进行 需求 分 析 过 程 的 基础 和 前 提 ， 其 目的 在 于 产生 正确 的 用 户 需 求 说 明 书 ， 从 而 保证 需求 分 析 
过 程 产生 正确 的 软件 需求 规格 说 明 书 。 

需求 获取 工作 做 得 不 好 ， 会 导致 需求 的 频繁 变更 ， 影 响 项 目的 开发 周期 ， 严 重 的 可 导致 整个 项 目的 失 
败 。 开 发 人 员 应 首先 制订 访谈 计划 ， 然 后 准备 提问 单 进行 用 户 访谈 ， 获 取 需 求 ， 并 记录 访谈 内 容 以 形成 用 
户 需求 说 明 书 。 

2) 需求 分 析 

需求 分 析 过 程 主要 是 对 所 获取 的 需求 信息 进行 分 析 ， 及 时 排除 错误 和 弥补 不 足 ， 确 保 需求 文档 正确 地 
反映 用 户 的 真实 意图 ， 最 终 将 用 户 的 需求 转化 为 软件 需求 ， 形 成 软件 需求 规格 说 明 书 。 同 时 针对 软件 需求 
规格 说 明 书 中 的 界面 需求 以 及 功能 需求 ， 制 作 界面 原型 。 所 形成 的 界面 原型 ， 可 以 有 3 种 表示 方法 : 图 纸 
(以 书面 形式 )、 位 图 (以 图 片 形式 ) 和 可 执行 文件 (交互 式 )。 在 进行 设计 之 前 ， 应 当 对 开发 人 员 进行 培 训 ， 

以 使 开发 人 员 能 更 好 地 理解 用 户 的 业务 流程 和 产品 的 需求 。 


3. 开发 阶段 
开发 阶段 是 项 目 需求 与 软件 工程 相 结合 的 一 个 阶段 ， 解 决 了 具体 项 目 软件 如 何 实现 的 问题 。 通 常 可 分 


为 以 下 两 个 阶段 。 
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1) 软件 概要 设计 
设计 人 员 在 软件 需求 规格 说 明 书 的 指导 下 ， 需 完成 以 下 任务 。 
(1) 通过 软件 需求 规格 说 明 书 ， 对 软件 功能 需求 进行 体系 结构 设计 ， 确 定 软件 结构 及 组 成 部 分 ， 编 写 


《体系 结构 设计 报告 


告 》。 


(2) 进行 内 部 接口 和 数据 结构 设计 ， 编 写 《数据 库 设 计 报告 》。 

(3) 编写 《软件 概要 设计 说 明 书 》。 

2) 软件 详细 设计 

软件 详细 设计 阶段 的 任务 如 下 。 

(1) 通过 《软件 概要 设计 说 明 书 》， 了解 软件 的 结构 。 

(2) 确定 软件 部 分 各 组 成 单元 ， 进 行 详细 的 模块 接口 设计 。 

(3) 进行 模块 内 部 数据 结构 设计 。 

(4) 进行 模块 内 部 算法 设计 ， 例 如 可 采用 流程 图 、 伪 代码 等 方式 详细 描述 每 一 步 的 具体 加 工 要 求 及 种 
种 实现 细节 ， 编 写 《 软 件 详细 设计 说 明 书 》。 


4. 编码 阶段 


编码 阶段 是 针对 软件 详细 设计 的 具体 实现 ， 把 问题 解决 程序 化 。 这 个 过 程 主要 解决 以 下 问题 。 


1) 编写 代码 


开发 人 员 通 过 《软件 详细 设计 说 明 书 》 对 软件 结构 及 模块 内 部 数据 结构 和 算法 进行 代码 编写 ， 并 保证 


编译 通过 。 
2) 单元 测试 


代码 编写 完成 可 对 代码 进行 单元 测试 、 集 成 测试 ， 记 录 、 发 现 并 修改 软件 中 的 问题 。 


5. 系统 测试 阶段 


系统 测试 阶段 主要 验证 输入 是 否 按照 预定 结果 进行 输出 的 问题 。 发 现 软件 输出 与 实际 生产 、 系 统 定义 
不 符合 或 与 其 矛盾 的 地 方 。 系 统 测试 过 程 一 般 包 括 制订 系统 测试 计划 ， 进 行 测试 方案 设计 、 测 试用 例 开发 ， 


进行 测试 ， 最 后 要 对 测试 活动 和 结果 进行 评估 。 
6. 系统 验收 阶段 


系统 验收 环节 主要 是 与 客户 确认 软件 输出 与 项 目 需求 的 吻合 度 ， 确 定 是 否 项 目 完结 、 项 目下 一 步 计划 
等 ， 最 后 形成 项 目 验收 报告 书 。 


7. 系统 维护 阶段 
任何 一 个 软件 项 目 在 投入 生产 过 程 中 或 多 或 少 都 会 存在 这 样 那样 的 问题 ， 在 系统 维护 阶段 根据 软件 运 信 


行 的 情况 ， 对 软件 进行 适当 的 修改 ， 以 适应 新 的 要 求 ， 以 及 纠正 运行 中 发 现 的 错误 等 。 同 时 ， 还 需要 编写 


软件 问题 报告 和 软件 修改 报告 。 
28.4 项 目 开发 团队 
在 个 人 素养 中 我 们 看 到 团队 协作 的 重要 性 和 关键 性 ， 那 么 一 个 良好 稳定 运行 的 软件 开发 团队 要 怎么 构 


建 和 满足 项 目 要 求 呢 ? 如 图 28-4 所 示 。 
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软件 项 目 开发 团队 


| 项 上 经 理 ] EZ 


(ura ] | 程序 员 


| 测试 人 员 
图 28-4 项 目 开 发 团队 结构 


ED 


1. 项 目 团队 构建 
项 目 团队 解决 由 哪些 人 去 实现 一 个 软件 项 目的 问题 ， 一 般 由 以 下 几 个 角色 进行 构建 。 
1) 项 目 经 理 


项 目 经 理 要 具有 领导 才能 ， 主 要 负责 团队 的 管理 ， 对 出 现 的 问题 能 正确 而 迅速 地 做 出 决定 ， 能 充分 利 


用 各 种 渠道 和 方法 来 解决 问题 ， 能 跟踪 任务 ， 有 很 好 的 日 程 观 念 ， 能 在 压力 下 工作 。 
2) 系统 分 析 师 


主要 负责 系统 分 析 ， 了 解 用 户 需求 ， 写 出 《软件 需求 规格 说 明 书 》， 建 立 用 户 界面 原型 等 。 担 任 系统 分 
析 师 的 人 员 应 该 善于 协调 ， 并 且 具 有 良好 的 沟通 技巧 。 在 担任 此 角色 的 人 员 中 ， 必 须要 具备 业务 和 技术 领 


域 的 知识 。 
3) 设计 员 
主要 负责 系统 的 概要 设计 、 详 细 设计 和 数据 库 设 计 。 要 求 熟 悉 分 析 与 设计 技术 ， 熟 悉 系统 的 架构 。 
4) 程序 员 
负责 按 项 目的 要 求 进行 编码 和 单元 测试 ， 要 求 有 良好 的 编程 和 测试 技术 。 


5) 测试 人 员 

负责 进行 测试 ， 描 述 测试 结果 ， 提 出 问题 解决 方案 。 要 求 了 解 要 测试 的 系统 ， 具 备 诊断 和 解决 问题 的 
技能 。 

6) 其 他 人 员 


一 个 成 功 的 项 目 团队 是 一 个 高 效 、 协 作 的 团队 。 除 具有 一 些 软件 开发 人 员外 ， 还 需要 一 些 其 他 人 员 ， 
如 美工 、 文 档 管理 人 员 等 角色 。 
在 小 规模 企业 中 可 能 一 个 人 具有 多 个 角色 ， 例 如 开发 人 员 与 测试 人 员 是 同一 个 人 。 在 复杂 的 项 目 中 ， 


项 目 角 色 不 限于 以 上 角色 ， 又 可 以 进一步 进行 分 配 ， 比 如 同样 的 功能 在 不 同 设备 上 进行 实现 可 以 分 为 PC 


端 开发 工程 师 和 移动 端 开发 工程 师 。 
2. 项 目 团队 要 求 


一 个 高 效 的 软件 开发 团队 是 建立 在 合理 的 开发 流程 及 团队 成 员 密切 合作 的 基础 之 上 的 。 每 一 个 成 员 


特征 。 
1) 具有 明确 且 有 挑战 性 的 共同 目标 


共同 迎接 挑战 ， 有 效 地 计划 、 协 调和 管理 各 自 的 工作 以 完成 明确 的 目标 。 高 效 的 开发 团队 具有 以 下 几 个 


一 个 具有 明确 且 有 挑战 性 共同 目标 的 团队 ， 其 工作 效率 会 很 高 。 因 为 通常 情况 下 ， 技 术 人 员 往 往 会 为 


完成 了 某 个 具有 挑战 性 的 任务 而 感到 自豪 ， 而 反 过 来 技术 人 员 为 了 获得 这 种 自豪 的 感觉 ， 会 更 加 积极 地 工 


作 ， 从 而 带 来 团队 开发 的 高 效率 。 
2) 团队 具有 很 强 的 凝聚 力 


在 一 个 高 效 的 软件 开发 团队 中 ， 成 员 的 凝聚 力 表现 为 相互 支持 、 相 互 交 流 和 相互 尊重 ， 而 不 是 相互 推 
外 责任、 保守 、 指 责 。 例 如 ， 某 个 成 员 明明 知道 另外 的 模块 中 需要 用 到 一 段 与 自己 已 经 编写 完成 且 有 些 难 
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度 的 程序 代码 ， 但 他 就 是 不 愿 拿 出 来 给 其 他 成 员 共 享 ， 也 不 愿 与 系统 设计 人 员 交 流 ， 这 样 就 会 为 项 目的 顺 
利 开 展 带 来 不 良 的 影响 。 
3) 具有 融洽 的 交流 环境 
在 一 个 开发 团队 中 ， 每 个 开发 小 组 人 员 行使 各 自 的 职责 ， 例 如 系统 设计 人 员 做 系统 概要 设计 和 详细 设 
计 ， 需 求 分 析 人 员 制 定 需求 规格 说 明 ， 项 目 经 理 配置 项 目 开发 环境 并 且 制 订 项 目 计划 等 。 但 是 由 于 种 种 原 
， 每 个 组 员 的 工作 不 可 能 一 次 性 做 到 位 ， 如 系统 概要 设计 的 文档 可 能 有 个 别 地 方 会 词 不 达意 ， 这 样 在 做 
详细 设计 的 时 候 就 有 可 能 造成 误解 。 因 此 高 效 的 软件 开发 团队 是 具有 融洽 的 交流 环境 的 ， 而 不 是 那 种 简单 
的 命令 执行 式 的 。 

4) 具有 共同 的 工作 规范 和 框架 

高 效 软件 开发 团队 具有 工作 的 规范 性 及 共同 框架 ， 对 于 项 目 管理 具有 规范 的 项 目 开发 计划 ， 对 于 分 析 
设计 具有 规范 和 统一 框架 的 文档 及 审 评 标准 ， 对 于 代码 具有 程序 规范 条 例 ， 对 于 测试 有 规范 且 可 推理 的 测 
试 计划 及 测试 报告 ， 等 等 。 

5) 采用 合理 的 开发 过 程 

软件 项 目的 开发 不 同 于 一 般 商 品 的 研发 和 生产 ， 开 发 过 程 中 面临 着 各 种 难以 预测 的 风险 ， 例 如 客户 需 
求 的 变化 、 人 员 的 流失 、 技 术 的 瓶颈 、 同 行 的 竞争 等 。 高 效 的 软件 开发 团队 往往 会 采用 合理 的 开发 过 程 去 
控制 其 中 的 风险 ， 提 高 软件 的 质量 ， 降 低 开发 的 费用 ， 等 等 。 


28.5 项 目的 实际 开发 过 程 


项 目 开发 流程 解决 了 软件 怎么 开展 的 问题 ， 那 么 项 目 实际 运作 解决 了 软件 项 目 风险 控制 问题 。 科 学 的 
项 目 运作 过 程 可 以 及 时 修正 项 目的 偏离 ， 确 保 项 目的 产 出 有 效 。 项 目的 实际 开发 过 程 如 图 28-5 所 示 。 


一 一 > 可 行 性 分 析 
一 一 

一 一 >| 项 目 风险 评估 

[一 一 一 >| 确定 项 目 过 程 定义 


项 目的 实际 开发 过 程 | 一 一 一 一 一 
基 | 确定 开发 工具 


| 项 目 开发 


一 一 一 > 项 目测 试验 收 


一 一 > 项目 过 程 总 结 


28-5 项目 实 际 开发 过 程 
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1. 可 行 性 分 析 

做 可 行 性 分 析 ， 从 而 确定 项 目 目标 和 范围 ， 开 发 一 个 新 项 目 或 新 版 本 时 ， 首 先是 和 用 户 一 起 确认 需求 ， 
进行 项 目的 范围 规划 。 当 用 户 对 项 目 进度 的 要 求 和 优先 级 高 的 时 候 ， 往 往 要 缩小 项 目 范围 ， 对 用 户 需求 进 
行 优先 级 排序 ， 排 除 优先 级 低 的 需求 。 

另外 , 做 项 目 范围 规划 的 一 个 重要 依据 就 是 开发 者 的 经 验 和 对 项 目 特征 的 清楚 认识 。 项 目 范围 规划 
初期 需要 进行 一 个 宏观 的 估算 ， 否 则 很 难 判 断 清楚 ， 或 对 用 户 承 诺 在 现 有 资源 情况 下 需要 多 长 时 间 完 


成 需求 。 
踊 肖 归 。 ”2 项 目 风 险 评估 
Bas 风险 管理 是 项 目 管理 的 一 个 重要 知识 领域 ， 整 个 项 目 管理 的 过 程 就 是 不 断 地 去 分 析 、 跟 踪 和 减轻 项 目 


风险 的 过 程 。 风 险 分 析 的 一 个 重要 内 容 就 是 评估 风险 的 根源 ， 然 后 根据 根源 去 制定 专门 的 应 对 措施 。 风 险 
管理 贯穿 整个 项 目 管理 过 程 ， 需 要 定期 对 风险 进行 跟踪 和 重新 评估 ， 对 于 转变 成 了 问题 的 风险 还 需要 事先 
制订 相关 的 应 急 计划 。 


小 。 “3 确定 过 程 定义 


项 目的 目标 和 范围 确定 后 ， 接 下 来 开始 确定 项 目的 过 程 ， 如 项 目 整个 过 程 中 采用 何 种 生命 周期 模型 ， 
项 目 过 程 是 否 需要 对 组 织 级 定义 的 标准 过 程 进行 裁剪 等 。 项 目 过 程 定义 是 进行 WBS (Work Breakdown 
Structure， 工 作 分 解 结构 ) 分 解 前 必须 确定 的 一 个 环节 。WBS 就 是 把 一 个 项 目 按 一 定 的 原则 分 解 成 任务 ， 
任务 再 分 解 成 一 项 项 工作 ， 再 把 一 项 项 工作 分 配 到 每 个 人 的 日 常 活动 中 ， 直 到 分 解 不 下 去 为 止 。 


4. 确定 开发 工具 
确定 项 目 开发 过 程 中 需要 使 用 的 方法 、 技 术 和 工具 。 一 个 项 目 中 除了 使 用 到 常用 的 开发 工具 外 ， 还 会 

使 用 到 需求 管理 、 设 计 建 模 、 配 置 管理 、 变 更 管理 、IM 沟通 〈 及 时 沟通 ) 等 诸多 工具 ， 使 用 到 面向 对 象 分 
析 和 设计 ， 开 发 语言 、 数 据 库 、 测 试 等 多 种 技术 ， 在 这 里 都 需要 分 析 和 定义 清楚 ， 这 将 成 为 后 续 技能 评估 
和 培训 的 一 个 重要 依据 。 


5. 项 目 开发 
根据 开发 计划 进度 进行 开发 项 目 经 理 跟 进 开发 进度 ， 严 格 控制 项 目 需求 变动 的 情况 。 项 目 开发 过 程 
中 不 可 避免 地 会 出 现 需求 变动 的 情况 ， 在 需求 发 生变 更 时 ， 可 根据 实际 情况 实施 严格 的 需求 变更 管理 。 

四 。 “6. 项 目测 试验 收 
测试 验收 阶段 主要 是 在 项 目 投入 使 用 前 查找 项 目 中 的 运行 错误 。 在 需求 文档 基础 之 上 核实 每 个 模块 能 
否 正常 运行 ， 核 实 需求 是 否 被 正确 实施 。 根 据 测试 计划 ， 由 项 目 经 理 安排 测试 人 员 ， 根 据 项 目 开展 计划 分 
配 进行 项 目的 测试 工作 。 通 过 测试 ， 确 保 项 目的 质量 。 
小。 7. 项 目 过 程 总 结 
入 测试 验收 完成 紧 接 着 应 开展 项 目 过 程 的 总 结 ， 主 要 是 对 项 目 开发 过 程 的 工作 成 果 进行 总 结 ， 以 及 进行 
相关 文件 的 归档 、 备 份 等 。 
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28.6 ”项 目 规划 常见 问题 及 解决 


项 目的 开发 并 不 是 一 两 天 就 可 以 做 好 的 。 对 于 一 个 复杂 的 项 目 来 说 ， 其 开发 过 程 更 是 充满 了 曲折 和 艰 
辛 ， 可 能 会 出 现 这 样 那样 的 问题 。 


1. 如 何 满足 客户 需求 

满足 客户 的 需求 也 就 是 在 项 目 开发 流程 中 所 提 到 的 需求 分 析 。 如 果 一 个 项 目 经 过 大 量 的 人 力 、 物 力 、 
财力 和 时 间 的 投入 后 ， 所 开发 出 的 软件 没 人 要 ， 这 种 遭遇 是 很 让 人 痛心 疾 首 的 。 

需求 分 析 之 所 以 重要 ， 是 因为 它 具 有 决策 性 、 方 向 性 和 策略 性 的 作用 ， 它 在 软件 开发 的 过 程 中 占据 着 
举足轻重 的 地 位 。 在 一 个 大 型 软件 系统 的 开发 中 ， 它 的 作用 要 远 远大 于 程序 设计 。 那 么 ， 如 何 做 才能 满足 
客户 的 需求 呢 ? 

1) 了 解 客户 业务 目标 

只 有 在 需求 分 析 时 更 好 地 了 解 客户 的 业务 目标 ， 才 能 使 产品 更 好 地 满足 需求 。 充 分 了 解 客户 业务 目标 
将 有 助 于 程序 开发 人 员 设 计 出 真正 满足 客户 需要 并 达到 期 望 的 优质 软件 。 

2) 撰写 高 质量 的 需求 分 析 报 告 

需求 分 析 报告 是 分 析 人 员 对 从 客户 那里 获得 的 所 有 信息 进行 整理 ， 它 主要 用 以 区 分 业务 需求 及 规范 、 
功能 需求 、 质 量 目标 、 解 决 方法 和 其 他 信息 ， 它 使 程序 开发 人 员 和 客户 之 间 针对 要 开发 的 产品 内 容 达 成 了 
共识 和 协议 。 

需求 分 析 报告 应 以 一 种 客户 认为 易于 翻阅 和 理解 的 方式 组 织 编写 ， 同 时 程序 分 析 师 可 能 会 采用 多 种 图 
表 作为 文字 性 需求 分 析 报告 的 补充 说 明 ， 虽 然 这 些 图 表 很 容易 让 客户 理解 ， 但 是 客户 可 能 对 此 并 不 熟悉 ， 
此 ， 对 需求 分 析 报告 中 的 图 表 进 行 详细 的 解释 说 明 也 是 很 有 必要 的 。 
3) 使 用 符合 客户 语言 习惯 的 表达 方式 
在 与 客户 进行 需求 交流 时 ， 要 尽量 站 在 客户 的 角度 使 用 术语 ， 而 客户 却 不 需要 懂得 计算 机 行业 方面 的 
术语 。 

4) 尊重 客户 的 意见 

客户 与 程序 开发 人 员 ， 偶 尔 也 会 碰 到 一 些 难以 沟通 的 问题 。 如 果 客 户 与 开发 人 员 之 间 产 生 了 不 能 相互 
理解 的 问题 ， 要 尽量 多 听 听 客户 方 的 意见 ， 能 满足 客户 的 需求 时 ， 就 要 尽 可 能 地 满足 客户 的 需求 ， 如 果实 
在 是 因为 某 些 技术 方面 的 原因 而 无 法 实现 ， 应 当 合理 地 向 客户 说 明 。 

5) 划分 需求 的 优先 级 

绝 大 多 数 项 目 没有 足够 的 时 间或 资源 实现 功能 性 上 的 每 一 个 细节 。 如 果 需 要 对 哪些 特性 是 必要 的 ， 哪 
些 是 重要 的 等 问题 做 出 决定 ， 那 么 最 好 询问 一 下 客户 所 设 定 的 需求 优先 级 。 程 序 开发 人 员 不 可 以 猜测 客户 
的 观点 ， 然 后 去 决定 需求 的 优先 级 。 

2. 如 何 控制 项 目 进度 

大 量 的 软件 错误 通常 只 有 到 了 项 目 后 期 ， 在 进行 系统 测试 时 才 会 被 发 现 ， 解 决 问题 所 花 的 时 间 也 是 很 
难 预料 的 ， 经 常 导致 项 目 进度 无 法 控制 。 同 时 在 整个 软件 开发 的 过 程 中 ， 项 目 管理 人 员 由 于 缺乏 对 软件 质 
量 状况 的 了 解 和 控制 ， 也 加 大 了 项 目 管理 的 难度 。 
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面 对 这 种 情况 ， 较 好 的 解决 方法 是 尽早 进行 测试 ， 当 软件 的 第 一 个 过 程 结束 后 ， 测 试 人 员 要 马上 基于 
它 进行 测试 脚本 的 实现 ， 按 项 目 计 划 中 的 测试 目的 执行 测试 用 例 ， 对 测试 结果 做 出 评估 报告 。 这 样 ， 就 可 
以 通过 各 种 测试 指标 实时 监控 项 目 质量 状况 ， 提 高 对 整个 项 目的 控制 和 管理 能 力 。 

3. 如 何 控制 项 目 预算 

综 ”在 整个 项 目 开发 的 过 程 中 ， 错 误 发 现 得 越 晚 ， 单 位 错误 修复 成 本 就 会 越 高 ， 错 误 的 延迟 解决 必然 会 导 
致 整个 项 目 成 本 的 急剧 增加 。 

解决 这 个 问题 的 较 好 方法 是 采取 多 种 测试 手段 ， 尽 早 发 现 潜在 的 问题 。 
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在 本 篇 中 ， 将 综合 前 面 所 学 的 各 种 知识 技能 以 及 高 级 开发 技巧 来 开发 项 目 ， 其 中 包括 企业 门户 网 站 、 
游戏 大 厅 网 站 、 便 捷 计算 器 App 等 。 通 过 本 篇 的 学 习 ， 读 者 将 对 Web 网 页 编程 在 项 目 开发 中 的 实际 应 用 拥 
有 切身 的 体会 ， 为 日 后 进行 前 端 开 发 积累 下 项 目 管理 及 实践 开发 经 验 。 


第 29 章 项 目 实践 初级 阶段 一 一 制作 企业 门户 网 站 
第 30 章 项目 实 践 提高 阶段 一 一 制作 游戏 大 厅 网 站 
第 31 章 项 目 实践 高 级 阶段 一 一 开发 便捷 计算 器 App 


第 29 章 
项 目 实践 初级 阶段 一 一 制作 企业 门户 网 站 


EY 学 习 指引 


该 项 目 是 制作 一 个 企业 门户 网 站 ， 包 括 网 站 首页 、 公 司 简介 、 产 品 中 心 、 新 闻 中 心 、 联 系 我 们 等 企业 
模板 页 面 ， 本 章 介绍 制作 企业 门户 网 站 。 


5 全” 重点 导读 


。 了 解 项 目 代码 结构 。 
。 掌 握 项 目 代码 实现 。 
。 热 悉 项 目 总 结 的 方法 。 


29.1 项 目 代 码 结构 


本 项 目 是 基于 HIML 5、CSS 3、JavaScript 的 案例 程序 ， 案 例 主要 通过 HTML 5 确定 框架 、CSS 3 确定 
样式 、JavaScript 来 完成 调度 ， 通 过 三 者 合作 来 实现 网 页 的 动态 化 ， 案 例 所 用 的 图 片 全 部 保存 在 images 文 
件 夹 中 。 

本 案例 的 代码 清单 包括 htmljs.css 三 个 部 分 。 

(1) html 部 分 : 本 案例 包括 多 个 html 文件 , 主要 文件 为 index.html、about.html、 news.html、products.html、 
contacthtml。 它 们 分 别 是 首页 页 面 、 公 司 简介 页 面 、 新 闻 中 心 页 面 、 产 品 分 类 页 面 、 联 系 我 们 页 面 等 。 

(2) js 部 分 ， 本 案例 一 共有 三 个 js 代码 ， 分 别 为 main.js、jquery.min.js、bootstrap.min.js。 

(3) css 部 分 : 本 案例 一 共有 两 个 css 代码 ， 分 别 为 main.css、bootstrap.min.css。 


29.2 ”项目 代码 实现 


下 面 来 介绍 企业 门户 网 站 各 个 页 面 的 实现 过 程 及 相关 代码 。 


第 国 章 ”项目 实践 初级 阶段 一 -制作 企业 门户 网 站 


29.2.1 设计 企业 门户 网 站 首页 


企业 门户 网 站 的 首页 用 于 展示 企业 的 基本 信息 ， 包 括 企 业 介绍 、 产 品 分 类 、 产 品 介绍 等 ， 实 现 首页 的 
主要 代码 如 下 ; 


项 目 实践 初级 阶段 一 一 制作 企业 门户 网 站 
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HTML 5+CSS 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 


<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="static/js/main.js" type="text/javascript" charset="utf-8"></script> 
</body> 
</html> 


运行 本 案例 的 主页 index.html 文件 ， 即 可 预览 首页 效果 。 图 29-1 为 首页 的 项 部 模块 ， 包 括 网 页 菜单 、 
Banner 等 ; 图 29-2 为 首页 的 中 间 模 块 ， 包 括 产品 分 类 、 公 司 简介 、 联 系 我 们 、 产 品 展示 等 模块 ， 图 29-3 
为 首页 的 底部 模块 ， 包 括 联系 方式 和 一 个 微 信 图 片 。 


图 29-1 首页 顶部 模块 


产品 时 ， 公司 上 介 了 


图 29-2 首页 中 间 模 块 


图 29-3 首页 顶部 模块 


29.2.2 ”设计 Banner 动态 效果 
网 站 页 面 中 的 Banner 图 片 一 般 是 自动 滑动 运行 ， 用 户 可 以 使 用 JavaScript 代码 来 实现 自动 滑动 运行 效 
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果 ， 用 于 控制 整个 网 站 首页 Banner 图 片 自动 运行 动态 效果 的 JavaScript 代码 如 下 : 


$ (function(){ 
$(".move-top") .click (function () { 
var speed=200;// 滑 动 的 速度 
$('body,html') .animate({ scrollTop: 0 }, speed); 
return false; 
Ds; 


}) 
运行 之 后 , 网 站 首页 Banner 以 200ms 的 速度 滑动 , 图 29-4 为 Banner 的 第 一 张 图 片 ; 图 29-5 为 Banner 
的 第 二 张 图 片 ， 图 29-6 为 Banner 的 第 三 张 图 片 。 


图 29-6 Banner 的 第 三 张 图 片 


29.2.3 ”设计 公司 简介 页 面 
公司 简介 页 面 用 于 介绍 公司 的 基本 情况 ， 包 括 经 营 状 况 、 产 品 内 容 等 ， 实 现 页 面 功能 的 主要 代码 如 下 : 


<!DOCTYPE HTML> 
<html lang="zh-cn"> 
<head> 
<title></title> 
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</adiv> 
<ul class="footerlink col-sm-4 hidden-xs"> 
<1i> 
<a href="about -html"> 关 于 我 们 </a> 
</1i> 
<1i> 
<a href="products.html"> 产 品 介 绍 </a> 
</1i> 
<1i> 
<a href="news .html"> 新 闻 中 心 </a> 
</1i> 
<1i> 
<a href="contact .html"> 联 系 我 们 </a> 
</1i> 
</ul> 


<div class="gw col-sm-4 col-xs-12"> 
<p> 关 注 我 们 : </p> 
<img src="static/images/wx.jpg"/> 
<p> 客 服 热 线 : 021-12345678</p> 
</div> 
</div> 
<div class="copyright text-center"> 
<span>copyright © 2017 </span> 
<span> 昆 玉 化 工 有 限 公 司 </span> 
</div> 
</div> 
</footer> 
<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="static/js/main.js" type="text/javascript" charset="utf-8"></script> 
</body> 
</html> 


运行 本 案例 的 主页 index.html 文件 ， 然 后 单 击 首 页 中 的 “关于 昆 玉 ” 超 链接 ， 即 可 进入 关于 昆 玉 页 面 ， 
如 图 29-7 所 示 。 


人 
Hai 


图 29-7 关于 昆 玉 页 面 
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29.2.4 设计 产品 介绍 页 面 
产品 介绍 页 面 中 的 主要 内 容 包 括 产品 分 类 、 产 品 图 片 等 ， 当 单 击 某 个 产品 图 片 时 ， 可 以 进入 下 一 级 页 


面 ， 在 打开 的 页 面 中 查看 具体 的 产品 介绍 信息 。 下 面 给 出 产品 介绍 页 面 的 主要 代码 ; 


第 网 章 项 目 实践 初级 阶段 一 制作 企业 门户 网 站 


第 网 章 项 目 实践 初级 阶段 一 制作 企业 门户 网 站 
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<1i> 
<a href="about .html"> 关 于 我 们 </a> 
</1i> 
<1i> 
<a href="products.html"> 产 品 介绍 </a> 
</1i> 
<1i> 
<a href="news.html"> 新 闻 中 心 </a> 
</1i> 
<li> 
<a href="contact .html"> 联 系 我 们 </a> 
</1i> 
</ul> 
<div class="gw col-sm-4 col-xs-12"> 
<p> 关 注 我 们 : </p> 
<img src="static/images/wx.jpg"/> 
<p> 客 服 热线 : 021-12345678</p> 
</div> 
</div> 
<div class="copyright text-center"> 
<span>copyright ©® 2018 </span> 
<span> 昆 玉 化 工 有 限 公司 </span> 
</div> 
</div> 
</footer> 
<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="static/js/main.js" type="text/javascript" charset="utf-8"></script> 
</body> 
</html> 


运行 本 案例 的 主页 index.html 文件 ， 然 后 单 击 首页 中 的 “产品 介绍 ” 超 链接 ， 即 可 进入 产品 介绍 页 面 ， 
如 图 29-8 所 示 。 


图 29-8 产品 介绍 页 面 
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六 29.2.5 设计 新 闻 中 心 页 面 
一 个 企业 门户 网 站 需要 有 一 个 新 闻 中 心 页 面 ， 在 该 页 面 中 可 以 查看 有 关 企业 的 最 新 信息 ， 以 及 一 些 和 


本 企业 经 营 相关 的 政策 和 新 闻 等 ， 下 面 给 出 企业 门户 网 站 有 关 新 闻 中 心 页 面 代码 : 
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运行 本 案例 的 主页 index.html 文件 ， 然 后 单 击 首 页 中 的 “新 闻 中 心 ” 超 链接 ， 即 可 进入 新 闻 中 心 页 面 ， 


ZE 
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如 图 29-9 所 示 。 


人 AiR mt 


图 29-9 ”新闻 中 心 页 面 


人 29.2.6 设计 联系 我 们 页 面 


几乎 每 个 企业 都 会 在 网 站 的 首页 中 添加 自己 的 联系 方式 , 以 方便 客户 查询 。 下 面 给 出 联系 我 们 页 面 的 代码 : 


<!DOCTYPE HTML> 
<html lang="zh-cn"> 
<head> 
<title></title> 
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.min.css" /> 
<link rel="stylesheet" type="text/css" href="static/css/main.css" /> 
</head> 


<body> 
<div class="top-intr"> 
<div class="container"> 
<p class="pull-left"> 
昆 玉 化 工 有 限 公司 
</p> 
<p class="pull-right"> 
<a><i class="glyphicon glyphicon-earphone"></i> 联 系 电话 : 021-12345678</a> 
</p> 
</div> 
</div> 
<nav class="navbar-default"> 
<div class="container"> 
<div class="navbar-header"> 
<!--<button type="button" class="navbar-toggle" data-toggle="collapse" data- 
target="#bs-example-navbar-collapse"> 


<span class="sr-only">Toggle navigation</span> 
<span class="icon-bar"></span> 
<span class="icon-bar"></span> 
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<a href="contact .html"> 联 系 我 们 </a> 
</1i> 
</ul> 
<div class="gw col-sm-4 col-xs-12"> 
<p> 关 注 我 们 : </p> 
<img src="static/images/wx.jpg"/> 
<p> 客 服 热 线 : 021-12345678</p> 
</div> 
</div> 
<div class="copyright text-center"> 
<span>copyright © 2018</span> 
<span> 昆 玉 化 工 有 限 公司 </span> 
</div> 
</div> 


</footer> 
<script src="static/js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 


<script src="static/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script> 
<script src="static/js/main.js" type="text/javascript" charset="utf-8"></script> 


</body> 
</html> 


运行 本 案例 的 主页 index.html 文件 ， 然 后 单 击 首页 中 的 “联系 我 们 ” 超 链接 ， 即 可 进入 “联系 我 们 ” 
页 面 ， 在 其 中 查看 公司 地 址 、 联 系 方式 以 及 邮箱 地 址 等 信息 ， 如 图 29-10 所 示 。 


A 主页 WR 


公司 地 址 : 上 洒 市 负 王 区 产业 图 1 号 I 
固定 电话 ; 021-12345678 


相 am 话 ; 13021210000 


联系 邮箱 :Ku 


图 29-10 联系 我 们 页 面 


29.3 项目 总 结 


本 实例 是 模拟 制作 一 个 化 工 企业 的 门户 网 站 ， 该 网 站 的 主体 颜色 为 蓝 色 ， 给 人 一 种 明快 的 感觉 ， 
网 站 包括 首页 、 公 司 介绍 、 产 品 介绍 、 新 闻 中 心 以 及 联系 我 们 等 超 链 接 ， 这 些 功能 可 以 使 用 HTML 5 


来 实现 。 
对 于 首页 中 的 banner 图 片 以 及 左 侧 的 产品 分 类 模块 ， 均 使 用 JavaScript 来 实现 简单 的 动态 消息 ， 


为 左 侧 的 产品 分 类 模块 ， 当 鼠标 指针 放置 在 某 个 产品 信息 上 时 ， 该 文字 会 向 右 移动 一 个 字 节 ， 鼠 标 以 手 型 
样式 显示 ， 如 图 29-12 所 示 。 


图 29-11 


584 


第 区 章 项 目 实践 初级 阶段 一 一 制作 企业 门户 网 站 


图 29-11 产品 分 类 模块 图 29-12 动态 显示 产品 分 类 
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第 30 章 
项 目 实践 提高 阶段 一 一 制作 游戏 大 厅 网 站 


X” 学 习 指 引 


该 项 目 是 制作 一 个 游戏 大 厅 专 题 网 站 ， 包 括 首页 、 下 载 中 心 、 账 号 充值 、 新 闻 动 态 、 道 具 商 城 等 游戏 
主题 页 面 ， 本 章 就 来 介绍 制作 游戏 大 厅 网 站 。 


二” 重点 导读 


。 了 解 项 目 代码 结构 。 
。 掌 握 项 目 代码 实现 。 
*。 热 悉 项 目 总 结 的 方法 。 


30.1 ”项目 代码 结构 


本 项 目 是 基于 HTML 5、CSS 3、JavaScript 的 案例 程序 ， 案 例 主要 通过 HTML 5 确定 框架 、CSS 3 确定 
样式 、JavaScript 来 完成 调度 ， 三 者 合作 来 实现 网 页 的 动态 化 ， 案 例 所 用 的 图 片 全 部 保存 在 images 文件 夹 中 。 

本 案例 的 代码 清单 包括 html、js、css 三 个 部 分 。 

(1) html 部 分 : 本 案例 有 多 个 html 文件 , 分别 为 index.html、 Down.html、 Mall.html、 news.html、 Pay.html、 
Register.html 等 ， 它 们 分 别 是 官网 首页 、 下 载 中 心 页 面 、 道 具 商 城 页 面 、 新 闻 中 心 页 面 、 账 户 充值 页 面 、 用 
户 注册 页 面 等 ， 如 图 30-1 所 示 。 


© payhtml 

© Registerhtml 
ShowMall.html 
证 showNewshtml 


30-1 html 文件 列表 
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(2) js 部 分 : 本 案例 一 共有 5 个 js 代码 ,分别 为 FastReg.js、HtmlValidatelmg.js、jquery.js、lrtk.js 和 
public.js， 如 图 30-2 所 示 。 


四 


和 


FastRegjs 
DD HtmlValidatelmgjs 
] jqueryjs 
DO njs 
] publicjs 


图 30-2 js 文件 列表 
(3) css 部 分 ， 本 案例 一 共有 2 个 css 代码 ， 分 别 为 rtk.css、layout.css， 如 图 30-3 所 示 。 


] Inkcss 
] layout.css 


藻 和 否 


30-3 ”css 文件 列表 


30.2 项目 代 码 实现 
下 面 来 分 析 游戏 大 厅 网 站 各 个 页 面 的 代码 是 如 何 实现 的 。 


30.2.1 设计 游戏 大 厅 首 页 


游戏 大 厅 网 站 的 首页 用 于 展示 网 游 的 基本 信息 ， 以 及 其 他 小 网 游 的 基本 情况 ， 还 需要 包括 用 户 注册 内 
容 ， 只 有 注册 了 会 员 的 用 户 才能 下 载 并 开始 玩 游戏 ， 实 现 首页 的 主要 代码 如 下 : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/ 
xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- 样式 --> 


<link href="Css/layout.css" type="text/css" rel="stylesheet" /> 

<link type="text/css" href="Css/lrtk.css" rel="stylesheet" /> 

<script type="text/javascript" src="Js/jquery.js"></script> 

<script type="text/javascript" src="Js/lrtk.js"></script> 

< 一 [if IE 6]> 

<script src="js/DD belatedPNG 0.0.8a.js" type="text/javascript" ></script> 
<script type="text/javascript"> 


DD belatedPNG.fix(' '); 
</script> 

<![endif]--> 

<!-- banner --> 


<style type="text/css"> 

-nav bg -nav ul 1i .i home{ color:#b5954d;} 
</style> 

<meta name="Keywords" /> 

<meta name="Description" /> 
<title> 紫 金 游 </title> 
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Hm oss 3+JavaScript 从 入 门 到 项 目 实践 ( 超 信 版 ) 


NA 


第 畴 章 项目 实践 提高 阶段 一 一 制作 游戏 大 厅 网 站 


-> 
NN 
HfML 5XCSS 3+JavaScript 从 入 门 到 项 目 实 路 ( 超 信 版 ) 


<dt> <img src='images/267.jpg' width="'155' height='80' /> </dt> 
<dd> 
<p><strong><a href='/News/ShowNews.aspx?params=1188"， target="'_blank'> 紫 金 游 全 新 
版 本 正式 发 布 </a></strong></p> 
<p> 紫 金 游 团队 致力 于 打造 最 专业 的 棋牌 游戏 平台 , 我 们 将 根据 产品 现状 及 市 场 动态 定期 对 版 本 进行 迭代 
升级 。 本 次 版 本 涉及 更 新 内 容 如 下 : </p> 
</ad> 
</dl> 
<p class="clear"></p> 
<div class="news list"> 
<ul class="news list 1f"> 
<1li> <strong>[ 最 新 ]<a href="/News/ShowNews.aspx?params=1184" target=" blank"> 
每 日 免费 充值 卡 赠送 </a></strong> <span>04-03</span> </1i> 
<1li> <strong>[ 最 新 ]<a href="/News/ShowNews.aspx?params=1183" target=" blank"> 
紫金 游 演示 平台 玩家 Q8 群 </a></strong> <span>03-01</span> </1i> 
<li> <strong>[ 最 新 ]<a href="/News/ShowNews.aspx?params=1182" target=" blank"> 
游戏 建议 征集 (大 厅 右 上 角 ) </a></strong> <span>02-07</span> </1i> 
<1li> <strong>[ 最 新 ]<a href="/News/ShowNews.aspx?params=1181" target=" blank"> 
新 年 行 大 运 ,紫金 游 上 拜 财神 </a></strong> <span>01-26</span> </1i> 
</ul> 
<ul class="news list rg"> 
<li> <strong>[ 最 新 ]<a href="/News/ShowNews.aspx?params=1180" target=" blank"> 
金沙 银 闪 火 爆 上 线 </a></strong> <span>01-12</span> </1i> 
<li> <strong>[ 最 新 ]<a href="/News/ShowNews.aspx?params=1179" target=" blank"> 
新 增 游戏 ATT 连环 炮 、 大 圣 阅 海 </a></strong> <span>01-12</span> </1i> 
<1li> <strong>[ 最 新 ]<a href="/News/ShowNews.aspx?params=1177" target=" blank"> 
头 奖 500W! 幸运 扑克 系统 即将 上 线 </a></strong> <span>10-23</span> </1i> 
<1li> <strong>[ 最 新 ]<a href="/News/ShowNews.aspx?params=1176" target=" blank"> 
紫金 游 1.5 版 本 更 新 至 1.6</a></strong> <span>10-23</span> </1i> 
</ul> 
<p class="clear"></p> 
</div> 
</div> 
<div class=tagContent id=tagContent1> 
<dl> 
<dt> <img src='images/268.jpg' width="'155' height='80' /> </dt> 
<dd> 
<p><strong><a href='/News/ShowNews.aspx?params=1161' target='_blank'> 紫 金 游 平台 
8 招 打 造 最 稳定 棋牌 投资 项 目 </a></strong></p> 
<p> 紫 金 游 的 游戏 平台 ,以 稳定 的 运营 性 能 、 丰 富 的 盈利 点 赢得 了 棋牌 投资 者 的 关注 。 与 其 他 常见 的 棋牌 产 
晶 相 比 ,紫金 游 这 堵 专 门 为 地 方 棋牌 运营 商 打造 的 运营 级 产品 拥有 8 大 优势 </p> 
</dd> 
</dl> 
<p class="clear"></p> 
<div class="news list"> 
<ul class="news list_1f"> 
<1i> <strong>[ 新 闻 ]<a href="/News/ShowNews.aspx?params=1161" target=" blank"> 
紫金 游 平台 8 招 打造 最 稳定 棋牌 投资 项 . . .</a></strong> <span>08-29</span> </1i> 
<li> <strong>[ 新 闻 ]<a href="/News/ShowNews -aspx?params=1174"” target=" blank"> 
像 做 团购 一 样 推广 棋牌 游戏 </a></strong> <span>10-10</span> </1i> 
<1li> <strong>[ 新 闻 ]<a href="/News/ShowNews.aspx?params=1173" target=" blank"> 
游戏 推广 三 大 法 宝 : 视频 、 新 闻 、 病 毒 营 .. .</a></strong> <span>10-10</span> </1i> 
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<li> <strong>[ 新 闻 ]<a href="/News/ShowNews.aspx?params=1172" target=" blank">5 
个 小 技巧 让 你 的 新 游戏 避免 失败 </a></strong> <span>10-10</span> </1i> 
</ul> 
<ul class="news list rg"> 
<1li> <strong>[ 新 闻 ]<a href="/News/ShowNews.aspx?params=1168" target=" blank"> 
游戏 盈利 的 关键 : 如 何 促进 虚拟 游戏 币 的 . . .</a></strong> <span>09-24</span> </1i> 
<1li> <strong>[ 新 闻 ]<a href="/News/ShowNews.aspx?params=1166" target=" blank"> 
网 络 游戏 推广 : 得 属 丝 者 得 天 下 </a></strong> <span>09-24</span> </1i> 
<1li> <strong>[ 新 闻 ]<a href="/News/ShowNews.aspx?params=1160" target=" blank"> 
在 当前 市 场 环境 下 , 棋牌 游戏 运营 还 有 机 . - .</a></strong> <span>08-29</span> </1i> 
<li> <strong>[ 新 闻 ]<a href="/News/ShowNews.aspx?params=1159" target=" blank"> 
一 个 棋牌 创业 者 的 自述 </a></strong> <span>08-29</span> </1i> 
</ul> 
<p class="clear"></p> 
</div> 
</div> 
<div class=tagContent id=tagContent2> 
<dl> 
<dt> <img src='images/267.jpg' width='155，'height='80' /> </dt> 
<dd> 
<p><strong><a href='/News/ShowNews.aspx?params=1188' target=' blank'> 紫 金 游 全 新 
版 本 正式 发 布 </a></strong></p> 
<p> 紫 金 游 团队 致力 于 打造 最 专业 的 棋牌 游戏 平台 ,我们 将 根据 产品 现状 及 市 场 动态 定期 对 版 本 进行 迭代 
升级 .本 次 版 本 涉及 更 新 内 容 如 下 : </p> 
</dd> 
</dl> 
<p class="clear"></p> 
<div class="news list"> 
<ul class="news list_1f"> 
<li> <strong>[ 公 告 ]<a href="/News/ShowNews.aspx?params=1188" target=" blank"> 
紫金 游 全 新 版 本 正式 发 布 </a></strong> <span>07-02</span> </1i> 
<li> <strong>[ 公 告 ]<a href="/News/ShowNews.aspx?params=1176" target=" blank"> 
紫金 游 1.5 版 本 更 新 至 1. 6</a></strong> <span>10-23</span> </1i> 
<1li> <strong>[ 公 告 ]<a href="/News/ShowNews.aspx?params=1175" target=" blank"> 
紫金 游 1.4 版 本 更 新 至 1.5</a></strong> <span>10-14</span> </1i> 
<1li> <strong>[ 公 告 ]<a href="/News/ShowNews.aspx?params=1171" target=" blank"> 
紫金 游 演 示 平 台 免责 公告 </a></strong> <span>10-04</span> </1i> 
</ul> 
<ul class="news list_rg"> 
<li> <strong>[ 公 告 ]<a href="/News/ShowNews.aspx?params=1170" target=" blank"> 
紫金 游 1.3 版 本 更 新 至 1.4</a></strong> <span>09-27</span> </1i> 
<li> <strong>[ 公 告 ]<a href="/News/ShowNews.aspx?params=1165" target=" blank"> 
紫金 游 1.2 版 本 更 新 至 1.3</a></strong> <span>09-17</span> </1i> 
<li> <strong>[ 公 告 ]<a href="/News/ShowNews.aspx?params=1164" target=" blank"> 
棋牌 游戏 推广 : 掌握 网 民 上 网 规律 和 时 段 </a></strong> <span>09-13</span> </1i> 
<1i> <strong>[ 公 告 ]<a href="/News/ShowNews.aspx?params=1163" target=" blank"> 
最 省 钱 的 棋牌 推广 方法 一 一 SEO</a></strong> <span>09-13</span> </1i> 
</ul> 
<p class="clear"></p> 
</div> 
</div> 
<div class=tagContent id=tagContent3> 
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<div class="product"> 
<h2><span> 精 品 游戏 推荐 </span></h2> 
<ul> 
<1li> <a href="/Game/?params=10003300" title=" 斗 地 主 " target=" blank"> <img src="images/ 
260.png" width="212" height="116"” alt=" 斗 地 主 "/> </a> </1i> 
<1i> <a href="/Game/?params=10900500" title=" 斗 牛 " target=" blank"> <img src="images/ 
130.png" width="212" height="116" alt=" 斗 牛 "/> </a> </1i> 
<li> <a href="/Game/?params=10306600" title=" 智 勇 三 张 "” target=" blank"> <img src= 
"images/258.png"” width="212" height="116" alt=" 智 勇 三 张 "/> </a> </1i> 


</ul> 

<p class="clear"></p> 
</div> 
SE 


<div class="prize"> 
<h2><span> 热 门 兑换 奖品 </span></h2> 
<dl> 
<dt> <a href="#/ProductDetail.aspx?params=132" title=" 秦 迪 熊 毛 绒 玩具 " target=" blank"> 
<img src='images/PictureHandler.jpg' alt=" 泰 迪 能 毛 绒 玩具 " width="170" height="142" /> </a> </dt> 
<dd> <a href="#/ProductDetail.aspx?params=132" title=" 泰 迪 熊 毛 绒 玩具 "> 泰 迪 能 毛 绒 玩具 
</a> </dd> 
</dl> 
<dl> 
<dt> <a href="#/ProductDetail.aspx?params=129" title=" 泰 迪 熊 毛 绒 玩具 " target="_blank"> 
<img src='images/PictureHandler.jpg' alt=" 泰 迪 能 毛 绒 玩 具 " width="170" height="142" /> </a> </dt> 
<dd> <a href="#/ProductDetail.aspx?params=129"”title=" 秦 迪 熊 毛 统 玩具 "> 泰 迪 熊 毛 绒 玩 具 
</a> </dd> 
</dl> 
<dl> 
<dt> <a href="#/ProductDetail.aspx?params=127" title=" 泰 迪 熊 毛 绒 玩 具 " target=" blank"> 
<img src='images/PictureHandler.jpg' alt=" 泰 迪 能 毛 绒 玩具 " width="170" height="142" /> </a> </dt> 
<dd> <a href="#/ProductDetail.aspx?params=127" title=" 泰 迪 熊 毛 绒 玩 具 "> 泰 迪 熊 毛 绒 玩具 
</a> </dd> 
</dl> 
<dl> 
<dt> <a href="#/ProductDetail.aspx?params=126" title=" 泰 迪 能 毛 绒 玩具 " target=" blank"> 
<img src='images/PictureHandler.jpg' alt=" 泰 迪 能 毛 绒 玩具 " width="170" height="142" /> </a> </dt> 
<dd> <a href="#/ProductDetail.aspx?params=126" title=" 泰 迪 熊 毛 绒 玩具 "> 泰 迪 熊 毛 绕 玩 具 
</a> </dd> 
</dl> 
<p class="clear"></p> 
</div> 
</div> 
<p class="clear"></p> 
</div> 
<!-- footer --> 
<! 


footer --> 
<div class="footer"> 

<p> <a href="#">sgnbsp; 网 站 地 图 </a>snbspisnbspi1snbsp;snbsp;<a href="#"> 公 司 介 绍 
</a>gnbsp;|l&gnbsp;gnbsp;<a href="#"> 联系 我 们 </a>snbspil1snbsp;isnbspi<a href="#"> 游戏 协议 
</a>gnbsp; 1&nbspi<a href="#">&nbsp; 免 责 公告 </a></p> 

<p> 抵制 不 良 游戏 拒绝 盗版 游戏 注意 自我 保护 谨防 受骗 上 当 适度 <a href="#"> 游 戏 </a> 益 脑 沉迷 游戏 伤 身 合 
理 安排 时 间 享受 健康 生活 </p> 

<p> gnbsp; snbsp; &nbsp; 北 京 科技 至 上 有 限 公司 snbsp;<br /> 
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<input type="text" maxlength="4" onkeypress="return KeyPressNum(this,event);" 
class="textstyle" name="txtValidate" id="txtValidate" /> 
snbsp; <img src="/Public/Validate.ashx" alt=" 验 证 码 " title=" 点 击 刷新 验证 码 " border="0" 
id="imgValidate" onclick="this.src="/Public/Validate.ashx?x="' + Math.random();" align="absmiddle" 
style="cursor:pointer;" /></div> 
spanValidaten></div> 
<!--<a href="javascript:void(0);" onclick="javascript:document .getElementById 
('imgVvalidate') .src='/Public/Validate.ashx?x=' + Math.random();"> 看 不 清 , 换 一 张 </a> --> 
</1i> 
<1i> 
<input type="text" name="txtPromoter" id="txtPromoter" style="display:none;" /> 
<input name="" type="checkbox" value="" id="cbxEnable" checked="checked" /> 
已 阅读 并 同意 <a href="/Treaty.aspx"”target=" blank"> 用 户 服 务 协议 </a> </1i> 
<1i class="errormsg"> <span id="errormsg"></span> </1i> 
<1i class="tegbttn"> 
<input type="button" id="btnsubmit" /> 
<a href="#"></a> </1i> 
</ul> 
</div> 
<div class="clear"></div> 
</div> 
</div> 
<script type="text/javascript"> 
var domialname = "pk"; 
Var pusername = ""; 
</script> 
<script type="text/javascript" src="js/HtmlValidateImg.js"></script> 
<script type="text/javascript" src="js/FastReg.js"></script> 
</div> 
<!-- warp end 
</div> 
</body> 
</html> 


运行 本 案例 的 主页 index.html 文件 ， 即 可 预览 首页 效果 ， 图 30-4 为 首页 的 项 部 模块 ， 包 括 网 页 菜单 、 
Banner 图 片 等 ; 图 30-5 为 首页 的 中 间 模 块 ， 也 是 网 站 中 的 主要 部 门 , 包括 游戏 下 载 、 用 户 注册 、 最 新 新 闻 、 
游戏 推荐 等 模块 ， 图 30-6 为 首页 的 底部 模块 ， 包 括 网 站 中 的 超 链 接 以 及 一 些 说 明 信 息 。 


<div i 


> 


图 30-4 首页 顶部 模块 
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图 30-5 首页 中 间 模 块 


网 地 图 。 | 。 公司 介绍 “| 。 联系 我 们 | 游戏 协议 1 免责 公告 
抵制 不 良 游戏 拒 纺 盗版 坟 戏 注意 自我 保护 庶 防 妥 骗 上 兰 适度 游戏 益 脑 沉迷 蕉 戏 伤 身 合理 安排 时 间 享受 健康 生活 
北京 科技 至 上 有 限 公司 
Copyriht 2016-2020 


图 30-6 首页 底部 模块 


回 
30.2.2 设计 注册 验证 信息 
注册 页 面 的 验证 信息 需要 使 用 JavaScript 语言 来 实现 ， 具 体 的 实现 代码 如 下 : 


if (pusername != "'') { 
$("#txtPromoter") .val (pusername) .attr ("readonly", "readonly"); 
E 
var id = function(o) { return document.getElementById(o) } 
var scroll = function(o) { 
//var space=id(o) .offsetTop; 
var space = 307; 
id(o) .style.top = space + 'px'; 
void function() { 
var goTo = 0; 
var roll = setInterval(function() { 
var height = document.documentElement.scrollTop + document.body.scrollTop + space; 


var top = parseInt (id(o) .style.top); 
if (height != top) { 
goTo = height - parseInt((height - top) + 0.9); 
id(o) .style.top = goTo + ‘px'; 
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username: $("#txtUserName") -val() -Trim()v 
ED I 
}, 
function (data) { 
if (data == "success") { 
document .getElementById ("spanUserName") 
dui.jpg' align='absmiddle' width='16' height="16' border="0" />"; 
ef 


= "<img src='/Images/System/ 


document .getElementById ("spanUserName") .innerHTML = "<img src='/Images/System/cha. 
jpg' align='absmiddle' width="16' height="16' border="'0"' />"; 
和 


) 7 


在 主页 中 单 击 “ 快 速 注册 ”按钮 ， 即 可 进入 注册 页 面 ， 如 图 30-7 所 示 。 在 注册 页 面 中 根据 提示 输入 注 
册 信 息 ， 如 果 输 入 的 注册 信息 不 符合 规定 ， 则 会 出 现 验证 信息 ， 如 图 30-8 所 示 。 


免费 注册 
| 对 黄 灶 加: 站 2 ER 
ht “22, 6 . 下 < 
ee ey We “2-10 们 ,由 字 入、 由 字 、 匆 时 衬 呈 本 中文 址 成， 
有 际 :| “10 位， 由 字 年 糙 境 、 特 大 行军 或 中 广电 吃 ， 
和 ED "5-16 位 之 间 ， 由 字 全 、 草 字 或 本 于 入 号 组 成 
于 6 册 ， 外 于 如 宁 和 队 答 所 
到 本 和 
确认 密码 : | “请 再 内 窒 入 记 示 志 友 < 
名 + | “ 话 认 如 代 要 他 和 1 豆 交 针 名 ,长度 在 Zz0 位 之 同 。 ee 和 人潮 克 直 家 和 9 
| a ES “请 从 让 六 本 站 的 者 志和 从 证 S， 已 人 加 两， 
EE 各 男友 。 
En: Yha wr Em [3 Td 
让 现 并 同系 《网 记 加 内 以》 二 已 计生 委 《 用 P 哪 伯 议 >》 
ES BS i 
图 30-7 用 户 注册 页 面 图 30-8 验证 信息 


30.2.3 ”设计 下 载 中 心 页 面 


有 些 游戏 需要 下 载 并 安装 到 本 地 计算 机 后 ， 才 能 开始 游戏 ， 所 有 需要 游戏 下 载 的 页 面 ， 一 般 下 载 页 面 
中 提供 有 供用 户 下 载 的 按钮 ， 以 及 包括 该 游戏 的 简单 说 明 信 息 ， 如 游戏 大 小 、 运 行 环境 等 ， 下 面 给 出 下 载 
中 心 页 面 的 代码 ; 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/xhtml1/DTD/ 
xhtmll-transitional.dtd"> 


<html xmlns="http://www.w3.org/1999/xhtml"> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- 样式 --> 


<link href="Css/layout.css" type="text/css" rel="stylesheet" /> 
<script type="text/javascript" src="Js/jquery.js"></script> 
<!--[Iif IE 6]> 


<script src="js/DD belatedPNG 0.0.8a.js" type="text/javascript" ></script> 
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<div class="cont_down tit"><span> 更 新 时 间 :2018 年 2 月 1 日 </span> <span> 版 本 :18.1 版 </span> 
<span> 应 用 平台 : Win7/Win10</span> <span> 完 整 版 大 小 : 30MB</span></div> 
<div class="cont_down btn"> <a href="#" class="cont down btnl"> 下 载 大 厅 游 戏 </a> <a 
href="#"” class="cont_down_btn2"> 下 载 完整 版 </a> </div> 
<div class="cont dwon list"> 
<h3> 游 戏 介绍 </h3> 
<ul> 
<1li> <a href="/Game/?params=10003300"> <img src="/Uploads/GameRulePicture/259.png" 
alt=" 斗 地 主 " width="150" height="108" /> </a> <br /> 
<a href="/Game/?params=10003300"> 斗 地 主 </a> </1i> 
<1i> <a href="/Game/?params=10003303"> <img src="/Uploads/GameRulePicture/157.jpg" 
alt=" 斗 地 主 比赛 " width="150" height="108" /> </a> <br /> 
<a href="/Game/?params=10003303"> 斗 地 主 比赛 </a> </1i> 
<1i> <a href="/Game/?params=10301800"> <img src="/Uploads/GameRulePicture/191.jpg" 
十 秒 "width="150" height="108" /> </a> <br /> 
<a href="/Game/?params=10301800"> 三 十 秒 </a> </1i> 
<1i> <a href="/Game/?params=10306600"> <img src="/Uploads/GameRulePicture/257.png" 
alt=" 智 勇 三 张 " width="150" height="108" /> </a> <br /> 
<a href="/Game/?params=10306600"> 智 勇 三 张 </a> </1i> 
<1li> <a href="/Game/?params=10400402"> <img src="/Uploads/GameRulePicture/149.jpg" 
alt=" 二 人 梭哈 "width="150" height="108" /> </a> <br /> 
<a href="/Game/?params=10400402"> 二 人 梭哈 </a> </1i> 
<1i> <a href="/Game/?params=10900500"> <img src="/Uploads/GameRulePicture/155.jpg" 
alt=" 斗 牛 " width="150" height="108" /> </a> <br /> 
<a href="/Game/?params=10900500"> 斗 牛 </a> </1i> 
<1i> <a href="/Game/?params=10901800"> <img src="/Uploads/GameRulePicture/156.jpg" 
alt=" 百 人 牛牛 " width="150" height="108" /> </a> <br /> 
<a href="/Game/?params=10901800"> 百 人 牛牛 </a> </1i> 
<li> <a href="/Game/?params=11901800"> <img src="" alt=" 疯 狂 两 张 " width="150" 
height="108" /> </a> <br /> 
<a href="/Game/?params=11901800"> 疯 狂 两 张 </a> </1i> 
<1i> <a href="/Game/?params=70001000"> <img src="/Uploads/GameRulePicture/203.jpg" 
alt="ATT" width="150" height="108" /> </a> <br /> 
<a href="/Game/?params=70001000">ATT</a> </1i> 
</ul> 
<p class="clear"></p> 
</div> 
</div> 
</div> 
<p class="clear"></p> 
</div> 
<! 
有 
<div class="footer"> 
<p> <a href="#">&nbsp; 网 站 地 图 </a>snbsp; snbsp; |snbspisnbspi<a href="#"> 公 司 介绍 </a>snbspi 
lsnbsp; snbsp;<a href="#"> 联 系 我 们 </a>snbsp; 1snbsp;snbsp;<a href="#"> 游 戏 协议 </a>snbsp; |&nbsp;<a 
href="#">&nbsp; 免 责 公告 </a></p> 
<p> 抵制 不 良 游戏 拒绝 盗版 游戏 注意 自我 保护 谨防 受骗 上 当 适度 <a href="#"> 游 戏 </a> 益 脑 沉迷 游戏 伤 身 合 
理 安排 时 间 享受 健康 生活 </p> 
<p> snbsp; snbsp;y &nbsp; 北 京 科技 至 上 有 限 公 司 gnbsp;<br /> 
&nbsp;Copyright 2018-2020</p> 
<p>gnbsp; </p> 
<hl>snbsp; </hl> 


footer --> 


footer --> 
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"absmiddle" style="cursor:pointer;" /></div> 
<div id="spanValidate"></div> 
-<a href="javascript:void(0);" onclick="javascript:document.getElementById 
(rimgvalidate') .src='/Public/Validate.ashx?x=' + Math.random();"> 看 不 清 , 换 一 张 </a> --> 
</1i> 
<li> 
<input type="text" name="txtPromoter" id="txtPromoter" style="display:none;" /> 
<input name="" type="checkbox" value="" id="cbxEnable" checked="checked" /> 
已 阅读 并 同意 <a href="/Treaty.aspx”target=" blank"> 用 户 服 务 协议 </a> </1i> 
<1i class="errormsg"> <span id="errormsg"></span> </1i> 
<li class="tegbttn"> 
<input type="button" id="btnsubmit" /> 
<a href="#"></a> </1i> 
</ul> 
</div> 
<div class="clear"></div> 
</div> 
</div> 
<script type="text/javascript"> 
var domialname = "pk"; 
Var pusername = ""; 
</script> 
<script type="text/javascript" src="Js/HtmlValidateImg.js"></script> 
<script type="text/javascript" src="Js/FastReg.js"></script> 
</div> 
<!-- warp end --> 
</div> 
</body> 
</html> 


在 主页 中 单 击 “ 下 载 中 心 ”按钮 ， 即 可 进入 游戏 下 载 页 面 ， 如 图 30-9 所 示 。 


2019 年 2 月 日 。 括 本 ; 坦 作 。 二 用 各: Win7Wn10 。 本 最 大 小 30UB 


图 30-9 下 载 中 心 页 面 


30.2.4 设计 账户 充值 页 面 


在 游戏 当中 ， 有 时 需要 购买 装备 ， 这 就 需要 给 自己 的 游戏 账户 充值 ， 下 面 给 出 设计 账户 充值 页 面 的 具 
体 代码 : 
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Hf Scss 3+JavaScript 从 入 门 到 项 目 实践 ( 超 信 版 ) 
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<1i> 
<input type="text" name="txtPromoter" id="txtPromoter" style="display:none;" /> 
<input name="" type="checkbox" value="" id="cbxEnable" checked="checked" /> 
已 阅读 并 同意 <a href="/Treaty.aspx”target=" blank"> 用 户 服 务 协议 </a> </1i> 
<1i class="errormsg"> <span id="errormsg"></span> </1i> 
<1li class="tegbttn"> 
<input type="button" id="btnsubmit" /> 
<a href="#"></a> </1i> 
</ul> 
</div> 
<div class="clear"></div> 
</div> 
</div> 
<script type="text/javascript"> 
var domialname = "pk"; 
Var pusername = ""; 
</script> 
<script type="text/javascript" src="Js/HtmlValidateImg.js"></script> 
<script type="text/javascript" src="Js/FastReg.js"></script> 
</div> 
<!-- warp end --> 
</div> 
</body> 
</html> 


在 主页 中 单 击 “ 账 户 充值 ”按钮 ， 即 可 进入 账户 充值 页 面 ， 在 其 中 可 以 看 到 提供 的 几 种 账户 充值 方式 ， 
如 图 30-10 所 示 。 


@ 二 友 全 方式、@) 填充 什 信 息 “人 充值 付款 “人 充 人 成 


未 。 大 全 中 局 。3THTE10 和 村 下 入 全 站 凡 户 信阳 六 所 台 个 人 中 放 奋 ! 


支付 全 充 人 《ED 


| 
ee 


但 行 上 充 从 ( 吕 之 ) ED 
te 


We A 


ET 


满 戏 点 卡 充值 
人 


图 30-10 ”账户 充值 页 面 


30.2.5 ”设计 新 闻 动态 页 面 
游戏 中 的 新 闻 动态 页 面 ， 一 般 以 列表 样式 显示 ， 具 体 的 代码 如 下 : 


<!DocTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/ 
DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
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<script type="text/javascript"> 


var index = 


</script> 
<div class="cont"> 
<div class="cont tit"> <strong> <img src="images/news_icon.PNG" width="32" height="31" 
/> 新 闻 动 态 </strong> <span> 您 所 在 位 置 <a href="/"> 首 页 </a> > 新 闻 动 态 </span> </div> 
<div class="con bg"> 
<div class="con news menu"> 
<ul> 
<li><a href="/News/"” class="'con_news_menul'> 最 新 </a></1i> 
<li><a href="/News/Default.aspx?params=newscenter"” > 新 闻 </a></1i> 
<li><a href="/News/Default.aspx?params=announce"” > 公告 </a></1i> 
<li><a href="/News/Default.aspx?params=activity” > 活动 </a></1i> 
</ul> 
</div> 
<div class="con news list"> 
<ul> 
<li class="con news_iconbg"> <strong> 最 新 <a href="ShowNews.html"> 紫 金 游 全 新 版 本 正式 
发 布 </a> </strong> <span>2018-07-02</span> </li> 
<li class="con _news_ iconbg"> <strong> 最 新 <a href="ShowNews .html"> 紫 金 游 平台 8 招 打造 
最 稳定 棋牌 投资 项 目 </a> </strong> <span>2018-07-01</span> </1i> 
<li class="con_news_iconbg"> <strong> 最 新 <a href="ShowNews.html"> 紫 金 游 平 台 8 招 打 造 
最 稳定 棋牌 投资 项 目 </a> </strong> <span>2018-08-29</span> </1i> 
<1i class="con_news_iconbg"> <strong> 最 新 <a href="ShowNews -html"> 每 日 免费 充值 卡 赠送 
</a> </strong> <span>2018-04-03</span> </1i> 
<li class="con news_iconbg"> <strong> 最 新 <a href="ShowNews.html"> 紫 金 游 演示 平台 玩家 
QQ 群 </a> </strong> <span>2018-03-01</span> </1i> 
<li class="con news_iconbg"> <strong> 最 新 <a href="ShowNews .html"> 游 戏 建议 征集 (大 厅 右 
上 角 )</a> </strong> <span>2018-02-07</span> </1i> 
<1li class="con _news_iconbg"> <strong> 最 新 <a href="ShowNews .html"> 新 年 行 大 运 , 紫金 游 上 
拜 财 神 </a> </strong> <span>2018-01-26</span> </1i> 
<1i class="con_news_iconbg"> <strong> 最 新 <a href="ShowNews .html"> 人 金竹 银 答 火 爆 上 线 
</a> </strong> <span>2018-01-12</span> </1i> 
<1li class="con news_iconbg"> <strong> 最 新 <a href="ShowNews.html"> 新 增 游戏 ATT 连环 炮 、 
大 圣 闹 海 </a> </strong> <span>2018-01-12</span> </1i> 
<1li class="con_news_iconbg"> <strong> 最 新 <a href="ShowNews .html"> 头 奖 500W! 幸运 扑克 
系统 即将 上 线 </a> </strong> <span>2018-10-23</span> </1i> 
<li class="con_news_iconbg"> <strong> 最 新 <a href="ShowNews.html"> 紫 金 游 1.5 版 本 更 新 
至 1.6</a> </strong> <span>2018-10-23</span> </1i> 
<li class="con_news_iconbg"> <strong> 最 新 <a href="ShowNews.html"> 紫 金 游 1.4 版 本 更 新 
至 1.5</a> </strong> <span>2018-10-14</span> </1i> 
<1li class="con_news_iconbg"> <strong> 最 新 <a href="ShowNews -html"> 像 做 团购 一 样 推广 棋 
牌 游戏 </a> </strong> <span>2018-10-10</span> </1i> 
<li class="con_news_iconbg"> <strong> 最 新 <a href="ShowNews.html"> 游 戏 推广 三 大 法 宝 : 
视频 、 新 闻 、 病 毒 营销 </a> </strong> <span>2018-10-10</span> </1i> 
<li class="con_news_iconbg"> <strong> 最 新 <a href="ShowNews.html">5 个 小 技巧 让 你 的 新 
游戏 避免 失败 </a> </strong> <span>2018-10-10</span> </1i> 
</ul> 
<div id="Content anpPageIndex" class="extAspNetPager"> <a disabled="disabled" style= 
"margin-right:5px;"> 上 一 页 </a><span style="margin-right:5px;font-weight:Bold;color:red;">1 </span> 


<a href="default .aspx?page=2" style="margin-right:S5px;">2</a><a href="default.aspx?page=3" style= 
"margin-right:S5px;">3</a><a href="default .aspx?page=2" style="margin-right:S5px;"> 下 一 页 </a> </div> 
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在 主页 中 单 击 “ 新 闻 动 态 ”按钮 , 即 可 进入 新 闻 动 态 页 面 , 在 其 中 可 以 查看 最 新 的 新 闻 信息 , 如 图 30-11 
所 示 。 
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30-11 新闻 动 态 页 面 


2018.01-12 


2018.10.23 


30.2.6 设计 道具 商城 页 面 


游戏 中 的 道具 可 以 帮助 游戏 用 户 升级 ， 因 此 需要 为 游戏 者 提供 道具 商城 ， 来 供用 户 购买 道具 ， 具 体 的 
代码 如 下 ; 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.0rg/TR/xhtml1/ 
DTD/xhtmll-transitional.dtd"> 
<html xmlns="http://www.w3.0org/1999/xhtml"> 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!-- 样式 --> 


<link href="Css/layout.css" type="text/css" rel="stylesheet" /> 

<script type="text/javascript" src="Js/jquery.js"></script> 

<script type="text/javascript" src="Js/public.js"></script> 

TB 61> 

<script src="Js/DD belatedPNG 0.0.8a.js" type="text/javascript" ></script> 
<script type="text/javascript"> 


DD belatedPNG.fix(' '); 
</script> 

<![endif]--> 

<!-- banner --> 


<style type="text/css"> 
-nav bg -nav ul 1i .i home{ color:#b5954d;} 
</style> 
<meta name="Keywords" /> 
<meta name="Description" /> 
<title> 紫 金 游 </title> 
</head> 
<body> 
<!-- warp start --> 
<div class="warp"> 

<!-- top --> 
> 


<!-- top 


<div class="top bg" id="topLoginIn"> 
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在 主页 中 单 击 “ 道 具 商 城 ”按钮 ， 即 可 进入 道具 商城 页 面 ， 在 其 中 可 以 看 到 提供 的 几 种 道具 ， 用 户 可 
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以 单 击 “购买 ”按钮 来 购买 ， 还 可 以 单 击 “ 试 穿 ”按钮 来 试 穿 道具 ， 如 图 30-12 所 示 。 


30-12 ”道具 商城 页 面 


30.3 项 目 总 结 


本 实例 模拟 的 是 一 个 游戏 类 网 站 ， 此 网 站 的 色调 以 深蓝 色 为 主 ， 给 人 的 感觉 比较 清新 、 明 亮 ， 在 网 站 
布局 方面 ， 是 以 比较 常见 的 上 中 下 布局 为 主 。 
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第 31 章 
项 目 实践 高 级 阶段 一 一 开发 便捷 计算 器 App 


后” 学 习 指引 
本 章 介 绍 一 款 使 用 纯 前 端 技 术 开 发 的 简单 又 时 蚁 的 便携 式 计算 器 应 用 程序 ， 用 过 一 次 就 会 爱不释手 。 


二 重点 导读 


。 掌 握 使 用 HTML 5+CSS 3+ JavaScript 设计 。 
。 热 悉 HTML 5 App UI 设 计 规范 和 实现 方案 。 


“掌握 HTML 5 App 界面 的 布局 设计 。 
。 掌 握 HTML 5 App LocalStroge 数据 存储 使 用 技巧 。 
。 掌 握 HTML 5 App 在 移动 手机 中 的 适 配 。 
31.1 项 目 概述 
1. 功能 梳理 


该 项 目 介 绍 一 款 使 用 纯 前 端 技术 开发 的 简单 易 用 的 计算 机 应 用 程序 , 是 一 个 HTML 5 版 本 的 移动 App 相 
可 通过 HBuilder IDE 打包 成 可 在 手机 上 安装 的 apk 安装 包 。 程 序 在 手机 上 安装 后 ， 打 开 操 作 界 面 直接 进入 
应 用 主页 面 ， 用 户 可 以 使 用 该 App 提供 的 功能 。 总 体 来 说 ， 该 App 提供 的 功能 如 下 : 

基本 的 计算 器 查看 运算 功能 ， 加 减 乘除 、 取 余 、 清 空 、 后 退 等 。 

一 键 换 肤 功能 。 

历史 运算 记录 查看 功能 。 

按键 区 集成 拨号 打 Call 功能 。 

关于 页 面 展示 。 

整个 HTML 5 App 的 UI 设计 基本 道 从 Google Material Design 设计 规范 ， 并 使 用 LocalStroge 存储 所 有 
的 历史 记录 数据 至 本 地 。 
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2. 知识 点 概述 
该 项 目 涉及 HTML 5 移动 应 用 程序 的 开发 操作 和 流程 ， 最 终 完成 一 个 App 的 开发 ， 可 了 解 其 设计 思路 
和 交互 实现 ， 主 要 涉及 如 下 知识 点 : 


使 用 HTML 5+CSS 3+ JavaScript 设计 并 实现 一 款 App 的 实现 方法 和 技巧 。 
HTML 5 App UI 设计 规范 和 实现 方案 。 

HTML 5 App 界面 的 布局 设计 。 

HTML 5 App LocalStroge 数据 存储 使 用 技巧 。 

HTML 5 App 在 移动 手机 中 的 适 配 。 


3. 开发 环境 

该 案例 的 开发 环境 配置 如 下 : 

(1) 系统 ，Windows 10 Pro-x64 平台 。 

(2) IDE: Hbuilder。 

(3) 开发 语言 ， HTML 5、CSS 3、JavaScript。 

开发 环境 的 搭建 相对 简单 ， 在 HBuilder 官网 下 载 对 应 的 IDE， 运 行 项 目 即 可 。 


4. 代码 结构 
旧 使 用 HBuilder 打开 项 目 之 后 ， 整 个 项 目的 代码 结构 如 图 31-1 所 示 。 
4 园 calculatorH5Demo 
2 cs 
加 calcess 
2 font 


加 democss 
加 confontcss 


国 calcjs 
国 commonjs 


Bjquey.minjs 


图 31-1 计算 器 项 目 目录 
该 项 目的 代码 目录 按照 HBuilder 项 目 文件 结构 组 织 ， 按 照 不 同 任务 的 功能 分 配 主 要 包括 : 

css 包 目 录 下 包含 1 个 文件 ，calc.css 是 该 HTML 5 App 的 样式 文件 。 

font 包 目 录 下 包含 6 个 文件 : 该 目录 下 的 代码 文件 是 该 App 中 所 用 到 的 字体 和 字体 图 标 文件 。 

image 包 目 录 下 包含 1 个 文件 ，deletel.png 是 该 App 中 所 用 的 图 片 资源 。 

js 包 目 录 下 包含 4 个 文件 ，zepto 包 目 录 包 含 了 该 App 所 需 的 其 他 JavaScript 框架 ，calcjjs 是 该 App 
中 相应 的 运算 或 者 数据 交互 的 处 理 ，common.js 则 是 所 需 的 工具 类 ，jquery.min.js 是 用 的 jQuery 
框架 。 
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项 目 根 目录 下 包含 3 个 代码 文件 :calc-black html 是 换 肤 中 的 夜间 模式 代码 文件 ，index.html 是 项 目的 
主 入 口 ，manifestjson 则 是 该 项 目的 配置 ， 内 容 涉 及 所 需 权限 等 。 


31.2 ”项目 解析 
按照 上 述 代码 结构 的 定义 ， 访 案例 的 具体 代码 实现 如 下 。 


31.2.1 index.html 文件 


该 代码 文件 直接 是 应 用 程序 的 主 入 口 ， 定 义 了 程序 的 样 貌 和 所 需 的 JavaScript、image 等 资源 ， 具 体 代码 
如 下 : 


<!DocTYPE html> 
<html> 
<head lang="en"> 
<meta charset="UTF-8"> 
<!-- 优 先 使 用 最 新 版 本 IE 和 chrome--> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
<!--360 使 用 Google Chrome Frame--> 
"webkit"> 
width=device-width, initial-scale=1.0,user-scalable=no" /> 


<meta name="renderer" content 


<meta name="viewport" content= 
<!-- 禁止 百度 转 码 -> 
<meta http-equiv="Cache-Control" content="no-siteapp" /> 
<!-- 状 态 栏 的 背景 颜色 -> 
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
<!-- uc 强制 坚 屏 --> 
<meta name="screen-orientation" content="portrait"> 
<!- QQ 强制 竖 屏 -> 
<meta name="x5-orientation" content="portrait"> 
<!-- UC 应 用 模式 --> 
<meta name="browsermode" content="application"> 
<!-- QQ 应 用 模式 --> 
<meta name="x5-page-mode" content="app"> 
<title> 网 页 计算 器 1Demos 代码 演示 、 代 码 片段 !</title> 
<meta name="Description"” content=" 网 页 计算 器 , Demos 代码 演示 、 代 码 片 段 !"> 
<meta http-equiv="Page-Enter" contect="revealTrans (duration=10, transtion= 50)"> 
<meta http-equiv="Page-Exit" contect="revealTrans (duration=20, transtion=6) "> 
<link rel="stylesheet" href="css/calc.css?t=20160810215148" /> 
</head> 
<body> 
<div id="container"> 
<div id="calc" class="calc"> 
<div id="top"> 
<div id="win-tool"> 

<span id="close" title=" 关 闭 " data-ico="X">&nbsp;</span> 

<span id="maxn” title=" 最 大 化 " data-ico=" 口 ">&nbspi</span> 

<span id="resize" title=" 最 小 化 " data-ico="O"><i class="iconfont change"> 

&#xe612;</i></span> 
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31.2.2 calc-black.html 文件 
该 代码 文件 是 计算 器 的 另 一 个 皮肤 页 面 ， 具 体 代码 如 下 : 


a Sess 3+JavaScript 从 入 门 到 项 目 实 践 ( 超 信 版 ) 


B24 
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Ha ess 3+JavaScript 从 入 门 到 项 目 实践 ( 超 信 版 ) 
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A 3+JavaScript 从 入 门 到 项 目 实践 ( 超 信 版 ) 
NA 


第 国 章 项 目 实践 高 级 阶段 一 -开发 便捷 计算 器 App 


31.2.3 calcjs 文件 
该 代码 文件 主要 是 数据 交互 的 相关 处 理 过 程 ， 具 体 代码 如 下 : 


i oss 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 


B24 


第 国 章 项 目 实践 高 级 阶段 一 开发 便捷 计算 器 App 
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ess 3+JavaScript 从 入 门 到 项 目 实践 ( 超 什 版 ) 


NA 
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31.2.4 calc.css 文件 
该 代码 文件 是 该 项 目的 样式 表 ， 代 码 如 下 : 
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a 
HL Sess 3+JavaScript 从 入 门 到 项 目 实践 ( 超 值 版 ) 
NE 


#downloadapp {display: none;} 

-updateAppIconRotate { 
display: inline-block; 
animation: update .5s linear infinite; 

| 

8@-webkit-keyframes name{ 
from{transform: rotate (0deg);} 
to{transform: rotate(360deg);} 

} 

@-moz-keyframes name{ 
from{} 
to{} 

} 

Qkeyframes updatef 
from{transform: rotate(0deg);} 
to{transform: rotate(360deg);} 

} 


其 他 工具 类 的 代码 ， 不 再 一 一 次 述 。 


31.2.5 ”App 打包 


HBuilder 默认 是 在 云端 打包 的 ， 也 就 是 将 你 的 代码 提交 上 去 ， 进 行 打包 ， 然 后 下 载 打 好 的 包 ， 请 参考 
第 21 章 的 21.2.7 小 节 的 内 容 。 


31.3 ”运行 效果 


项 目 编译 打包 后 ， 生 成 apk 安装 包 ， 在 手机 上 安装 并 运行 ， 运 行 效果 如 下 : 
首页 页 面 效 果 如 图 31-2 所 示 。 


31-2 首页 页 面 效 果 
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运算 页 面 效果 如 图 31-3 所 示 。 


123456789+ 


123456789 


31-3 ”运算 页 面 效果 


历史 记录 页 面 效果 如 图 31-4 所 示 。 


4-6=-2 
78x56=4368 
78x45=3510 
14+15=29 
10+45=55 
10+6=16 
89x6=534 
56-6=50 
7x8+23=79 
计 
图 31-4 ”历史 记录 页 面 效 果 


换 肤 页 面 效 果 如 图 31-5 所 示 。 
关于 页 面 效 果 如 图 31-6 所 示 。 
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©@o 


© -mH5APP. 
号 在 APP 上 ,入 入 手机 号 码 后 长 按 可 以 指 打 电话 


OVersion :100 


图 31-5 换 肤 页 面 效 果 图 31-6 关于 页 面 效 果 
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